La propiedad box-shadow de CSS3 nos permite lograr fácilmente efectos de sombra de capa. Expliquemos este atributo en detalle en la práctica.
1. Compatibilidad del navegador del atributo box-shadow. Veamos primero la compatibilidad del navegador de este atributo:
Opera: No sé qué versión empezó a admitir. Cuando publiqué este artículo para probarlo, actualicé Opera a la última versión 10.53, que ya admite el atributo box-shadow.
Firefox admite esto a través de la propiedad privada -moz-box-shadow.
Safari y Chrome admiten esto a través de la propiedad privada -webkit-box-shadow.
No es compatible con todos los IE (no sé si IE9 ha mejorado). No te preocupes, presentaremos algunos trucos para IE al final del artículo.
2. Sintaxis del atributo box-shadow
box-shadow tiene seis valores configurables:
img{box-shadow: Tipo de sombra Desplazamiento del eje X Desplazamiento del eje Y Tamaño de la sombra Extensión de la sombra Color de la sombra}
Cuando no se establece ningún tipo de sombra, el valor predeterminado es el efecto de sombra. Cuando se establece en inserción, es un efecto de sombra interior.
El desplazamiento del eje X y del eje Y no son equivalentes, pero son similares a "ángulo" y "posición" en Photoshop.
El tamaño, la extensión y el color de las sombras son los mismos que en Photoshop.
3. Análisis de ejemplo Veamos el efecto de una sombra de cuadro a través de varios ejemplos. Primero, cree un HTML simple para probar:
<html>
<cabeza>
<style type="text/css">Escribe la parte CSS aquí</style>
</cabeza>
<cuerpo>
<img src="prueba.jpg" />
</cuerpo>
</html>
Tenga en cuenta: para evitar problemas, solo box-shadow está escrito en el código CSS a continuación. En uso real, también debe escribir -moz-box-shadow y -webkit-shadow. Lo que debes hacer es muy simple: copiar dos sombras de cuadro y agregar -moz- y -webkit- delante de ellas.
imagen {
-moz-box-sombra:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
sombra de cuadro: 2px 2px 10px #06C;
}
(1). Sombra paralela, sin desplazamiento, tamaño de sombra de 10 píxeles, sin expansión, color #06C.
img{box-shadow:0 0 10px #06C;}
El valor de color aquí es el valor HEX. También podemos usar el valor RGBA. La ventaja del valor RGBA es que tiene un valor de transparencia Alfa adicional y puede controlar la transparencia de la sombra.
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}
(2). Agregue una extensión de 20 px a lo anterior.
img{box-shadow:0 0 10px 20px #06C;}
(3). Sombra interior, sin desplazamiento, tamaño 10px, sin expansión, color #06C.
img{box-shadow:inset 0 0 10px #06C;}
(4). Múltiples efectos de sombra.
Box-shadow se puede usar varias veces al mismo tiempo. Usemos una sombra de cuatro colores.
img{box-shadow:-10px 0 10px rojo, box-shadow:10px 0 10px azul,box-shadow:0 -10px 10px amarillo,box-shadow:0 10px 10px verde}
(5). El orden de uso de múltiples atributos de sombra. Cuando use múltiples atributos de sombra para el mismo elemento, debe prestar atención a su orden. La sombra escrita primero se mostrará en la parte superior. Por ejemplo, en el siguiente código, primero escribimos una sombra verde de 10 píxeles y luego escribimos un tamaño de 10 píxeles pero extendido por una sombra de 20 píxeles. El resultado es: una capa sombreada en verde encima de una capa sombreada en amarillo.
img{box-shadow:0 0 10px verde;box-shadow:0 0 10px 20px amarillo}
Pero si cambiamos el orden, así:
img{box-shadow:0 0 10px 20px amarillo,box-shadow:0 0 10px verde;}
No podremos ver la capa sombreada en verde escrita más tarde porque está cubierta por la capa amarilla escrita primero y con un radio mayor.
4. Deje que IE también admita box-shadow
El propio IE utiliza un filtro de sombra para lograr efectos similares, y también hay algunos archivos de pirateo js y .htc que pueden ayudarlo a lograr este efecto en IE. No puedo probarlos todos, así que aquí solo presento el que he usado.
ie-css3.htc es un archivo htc que permite que el navegador IE admita algunas propiedades CSS3, no solo box-shadow, sino que también permite que su navegador IE admita el atributo de esquina redondeada border-radius y el atributo text-shadow text-shadow.
Cómo usarlo: descárgalo y colócalo en el directorio de tu servidor
Escribe el siguiente código en tu <head></head>:
<!--[si IE]>
<tipo de estilo="texto/css">
img, #testdiv, .testbox{comportamiento: url( http://tudominio.com/js/ie-css3.htc );}
</estilo>
<![endif]-->
En la parte azul, ingrese el selector usando el atributo box-shadow, y en la parte verde, ingrese la ruta absoluta o relativa de ie-css3.htc. De todos modos, asegúrese de que sea accesible.
Entonces está bien. Pero todavía hay algunas cosas a tener en cuenta:
Cuando utilice este archivo htc, siempre que box-shadow, -moz-box-shadow o -webkit-box-shadow estén escritos en su CSS, IE lo renderizará.
Cuando utilice este archivo htc, no puede escribir box-shadow: 0 0 10px red; pero box-shadow: 0px 0px 10px red; de lo contrario, fallará en IE.
No se admite la transparencia alfa en los valores RGBA.
No se admiten sombras interiores insertadas.
No se admite la expansión de la sombra.
Las sombras solo aparecerán en negro en IE, sin importar qué otros colores les establezcas.
Por lo tanto, este script solo permite que IE admita algunos valores de sombra de cuadro. Si tiene otros scripts mejores para hackear IE, deje un mensaje para compartir.