Tag Archives: múltiples navegadores

Sombras CSS en múltiples navegadores

Un problema muy simple con una solución complicada, mayormente porque IE ignora la propiedad box-shadow de CSS3. En vez de eso progid:DXImageTransform.Microsoft.Shadow está logrando el truco y un equivalente puede ser hallado.

box-shadow: 4px 4px 8px #000;

para la sombra blanca es similar a

progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8)

porque box-shadow tiene los parámetros;

  • horizontal-offset
  • vertical-offset
  • blur-radius
  • color

y progid:DXImageTransform.Microsoft.Shadow:

  • color
  • direction (90 de la parte inferior derecha, también puede ser 0,45,135,225,270 y 315)
  • strength (la distancia, en píxeles en que se extiende el efecto del filtro, parecido a la combinación de 4px 4px en el box-shadow)

Lo que no tiene es un radio de desenfoque, aunque progid:DXImageTransform.Microsoft.Blur existe, desenfocará el contenido de la casilla también haciendo el texto ilegible.

Las esquinas

El resultado es bastante similar, con algunas diferencias en cómo IE muestra las esquinas. Tal como puede ver en la esquina superior derecha y la inferior derecha son un desastre (la inferior izquierda no se ve muy bien tampoco), pero demos gracias por que existen.

crossbrowser dropshadows in mozilla and internet explorer

Pueden ver el demo si quieren usar otros navegadores.

El código CSS

El código CSS completo para todos los navegadores es:

.black-shadow{ -moz-box-shadow: 4px 4px 8px #000;-webkit-box-shadow: 4px 4px 8px #000;box-shadow: 4px 4px 8px #000;
filter:
        progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=90,strength=8)
        progid:DXImageTransform.Microsoft.Shadow
(color=#000000,direction=180,strength=8)}

Usando CSS3 para dar estilo a formularios escritos en HTML5

Dar estilo a un formulario nunca es algo fácil de hacer, pero añadir CSS3 a un formulario HTML5 es una tarea que muestra una larga variedad de resultados en lo que se refiere a probar diferentes navegadores. Mire el link de prueba.

En lo que se refiere a CSS3 no es mucho lo que se puede hacer: pero añadir esquinas redondeadas, gradientes y sombras es mas que nada y el aspecto general del formulario es muuuuuuuuucho mejor. Pero HTML5 es soportado por pocos navegadores (éste formulario HTML sólo por OPERA) y CSS3 también por algunos navegadores – pero diferentes del que soporta HTML5.

El resultado

imposible ver el resultado en sólo un navegador: las esquinas redondeadas pueden ser vistas en Mozilla/Chrome/Safari y los elementos HTML5 en Opera.

Internet Explorer? Mejor ni pregunte. No hay soporte aún.

Así que los resultados:

  1. Mozilla 3: esquinas redondeadas + / elementos HTML5 –
    capture-2
  2. Chrome: esquinas redondeadas + (se ven extrañas) / elementos HTML5 –
    chrome-screenshot
  3. Safari: esquinas redondeadas + / elementos HTML5 –
    capture-3
  4. Opera 9: esquinas redondeadas – / elementos HTML5 +
    capture-1
  5. IE (sin importar cual): esquinas redondeadas – / elementos HTML –
    ie8-screenshot

Parece que tendremos que esperar un poco más hasta que podamos lanzar Javascript desde dar estilos a las formas.

ACTUALIZACIÓN

Ric Ferrer envió una captura de pantalla con el comportamiento del safari móvil desde su Ipod. Gracias 🙂

37555934