Sombras en cajas con box-shadow

Imagen:35days-box-shadow-simple.jpg

Una característica divertida CSS3 que se ha implementado en Firefox 3.5 es la sobra para cajas. Esta característica permite dibujar una “sombra” en el marco de casi cualquier elemento.

Como todavía se está trabajando en la propiedad box-shadow de CSS3, en Firefox se implementó como moz-box-shadow. Así es como Mozilla prueba las propiedades experimentales de CSS, el nombre de la propiedad precedido con la palabra “-moz-“. Cuando se finalice la especificación, la propiedad se llamará “box-shadow”.

¿Cómo funciona?

La aplicación de una sombra a un elemento es sencilla. El estándar CSS3 permite como su valor:
none | [<shadow>,] * <shadow>,
donde <shadow> es:
<shadow> = inset? & & [<length> {2,4} & & <color>? ]
Las dos primeras son las longitudes horizontales y verticales de separación de la sombra, respectivamente. La tercera es la longitud del radio de desenfoque (comparable a la propiedad radio de desenfoque de la propiedad text-shadow). Por último, la cuarta es la longitud del radio de propagación, lo que permite que la sombra crezca (valores positivos) o se reduzca (valores negativos), en comparación con el tamaño del elemento padre.
La palabra clave inset está bastante bien explicada en el estándar:
si está presente, cambia la sombra desde una sombra exterior (una desde el elemento hacia el lienzo, como si la caja estuviera encima del lienzo) a una sombra interior (como si el lienzo hiciera sombra sobre la caja, como si esta estuviera hundida en el lienzo).
Pero hablar es barato, veamos algunos ejemplos.
Para dibujar una simple sombra, sólo hay que definir un desplazamiento y un color, y listo:
-moz-box-shadow: 1px 1px 10px #00f;
Imagen:35days-box-shadow-simple.jpg
caja con una sombra simple
(Cada uno de los ejemplos en este artículo están con el código primero, seguido de una captura de pantalla de Firefox 3.5 en MacOSX).
Del mismo modo, puede dibujar una sombra interna con la mencionada palabra clave.
-moz-box-shadow: 10px inset 1px 1px #888;
Imagen:35days-box-shadow-inset.jpg
cuadro con sombra interna
Con la ayuda de un radio de difusión, se puede definir una sombra más pequeña (o mayor) que el elemento al que se aplica:
-moz-box-shadow: 0px 20px 10px-10px #888;
Imagen:35days-box-shadow-spread.jpg
cuadro con sombra con radio de propagación
Si lo desea, también puede definir múltiples sombras mediante la definición de varias sombras, separadas por comas (gracias aMarkus Strange):
-moz-box-shadow: 0 0 20px black, yellow 20px 15px 30px, 20px 15px 30px-cal-20px-15px 30px blue, 20px-15px 30px red;
Imagen:35days-box-shadow-multiple.jpg
cuadro con múltiples sombras
Las diferentes sombras se mezclan suavemente y como te habrás dado cuenta, el orden en que se definen marca una diferencia. Como box-shadow es una característica CSS3, Firefox 3.5 adhiere al orden de pintura para CSS3. Esto significa, la primera sombra especificada se dibuja en la parte superior, así que tenelo en cuenta a la hora de diseñar con múltiples sombras.
Como último ejemplo, quiero mostrar que la combinación de -moz-box-shadow con una definición de color RGBA. RGBA es el mismo que RGB, pero añade un canal alfa de transparencia para cambiar la opacidad del color. Hagamos una caja de sombra negra sin difuminar con una opacidad del 50 por ciento sobre un fondo amarillo:
-moz-box-shadow: inset 5px 5px 0 RGBA (0, 0, 0, .5);
Imagen:35days-box-shadow-rgba.jpg
cuadro con sombra RGBA
Como puede ver, el fondo amarillo es visible, a través de la sombra semi-transparente. Esta característica es particularmente interesante cuando se trata de imágenes de fondo, que usted podrá ver brillando a través de la caja con sombra.

Compatibilidad entre navegadores

Como se trata de una nueva propiedad, en la que todavía se está trabajando, box-shadow aún no ha sido ampliamente adoptada por navegadores.
  • Firefox 3.5 implementa la característica como -moz-box-shadow, así como múltiples sombras, la palabra clave inset y una propagación de radio.
  • Safari / WebKit ha elegido un camino similar a Firefox mediante la aplicación de la función como -webkit-box-shadow. Las sombras múltiples están implementadas desde la versión 4.0, mientras que todavía no se puede usar la palabra clave inset ni la propagación de radio.
  • Por último, Opera y Microsoft Internet Explorer aún no han aplicado la propiedad box-shadow, aunque en MSIE es posible que desee probar su propiedad privativa DropShadow.
Para lograr la mayor cobertura posible, es aconsejable definir los tres, el -moz,-webkit, y la sintaxis estándar CSS3 en paralelo. Los navegadores que pueden usarlo tomarán la que implementan. Por ejemplo:
-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;
La buena noticia es que la propiedad box-shadow no produce malos resultados en los navegadores que no la implementan.Por ejemplo, todos los ejemplos anteriores se verán como cajas sin sombra sencillas y aburridas en MSIE.

Conclusiones

La propiedad box-shadow de CSS3 no está todavía tan ampliamente disponible en los navegadores (y por lo tanto para los usuarios) como, por ejemplo, la propiedad text-shadow, pero con la limitada implementación de WebKit y las posibilidades completas que permite Firefox 3,5 (al menos en el estado actual del borrador de esta propiedad), más y más usuarios podrán ver un cierto nivel de sombras de caja.
Como desarrollador web, puede utilizar la función, sabiendo que le está dando una mejor experiencia a los usuarios con navegadores modernos mientras que no espanta a quienes usan navegadores más viejos.
Anuncios
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Anuncios
A %d blogueros les gusta esto: