A veces veo sombras. La propiedad CSS box-shadow

Hay muchas páginas que explican cómo funcionan las distintas propiedades CSS y por eso nunca he visto la necesidad de explicar ninguna. Pero tengo que publicar un truco que alguien me ha pedido y creo que en este caso, lo primero es ver cómo funciona la propiedad que utilizaré: box-shadow.

Como la traducción en inglés nos cuenta, esta propiedad nos facilita la creación de sombras
para una capa o caja. La sintaxis lleva hasta seis valores, pero en la mayoría de casos usaremos sólo tres. Entre paréntesis van los opcionales:

box-shadow: desplaz_horiz desplaz_vert (desenfoque) (tamaño) color (inset);

Lo que en la práctica hace box-shadow, es superponer una capa del mismo tamaño que la original, pero justo por debajo de esta. El desplazamiento horizontal y vertical (en píxeles) es lo que hace que esa capa simule ser una sombra. Cuando la situamos sin desplazamiento (0,0), la sombra no será visible por tener el mismo tamaño que la caja principal. Para verla, tendríamos que darle un tamaño, de manera que rebosaría por así decirlo.

El desenfoque es un degradado añadido a la capa que forma la sombra y por eso, cuando se aplica siempre es visible. Esto ocurrirá aún estando en coordenadas origen (0,0), tal y como ocurre con el tamaño.

Por defecto, la sombra se proyecta hacia el exterior y con inset lo que hacemos es que sea visible por dentro de la capa. Es como si esa parte que queda oculta la pasáramos delante, elimináramos la parte central y dejáramos sólo los bordes. Lógicamente, en este caso tendremos que darle un tamaño o un desenfoque para que sea visible.


Dicen que una imagen vale más que mil palabras y aunque no siempre es así, creo que en esta ocasión va a venir bien visualizar como funciona. A continuación unos ejemplos para que veáis los cambios que se van produciendo según los valores:

 box-shadow:   0;
 box-shadow:   6px   0             black;
 box-shadow:   6px  -8px           #666666;
 box-shadow:   8px   8px           black;
 box-shadow: -12px -12px  6px      #333;
 box-shadow: -12px -12px 16px  0   #333; 
 box-shadow: -10px  10px  5px  0   green; 
 box-shadow: -10px  10px  5px  8px orange; 
 box-shadow: -10px  10px  5px 16px orange; 
 box-shadow:   0     0   30px      #FFFF99 inset;
 box-shadow:   0     0    0   30px #FFFF99 inset;
 box-shadow:   0     0   40px      grey;
 box-shadow:   0     0    0   40px grey;

Como habéis podido comprobar, esta propiedad da mucho juego si se saben combinar sus distintos parámetros, pero aún hay más. Y es que se pueden acumular distintas sombras para una misma caja. Para ello sólo hay que separarlas con comas. Cuando se solapen sombras de esta manera, hay que tener en cuenta que si usáis el mismo tamaño o desenfoque para todas, sólo se verá la primera.

 box-shadow: 0px 0px;
 box-shadow: 0px 0px 20px red;
 box-shadow: 0px 0px 20px red, 0px 0px 40px orange;
 box-shadow: 0px 0px 20px red, 0px 0px 40px orange,
               0px 0px 60px white;
 box-shadow: 5px 5px #FFFF99, 5px 5px orange;      
 box-shadow: 5px 5px orange, 5px 5px #FFFF99;
 box-shadow: 5px 5px orange, 5px 5px 30px #FFFF99; 
 box-shadow: 0px 0px 20px red, 0px 0px 40px 5px orange,
               0px 0px 10px 0px purple,
               0px 0px 10px 5px yellow;
 box-shadow: 0px 0px 20px red, 0px 0px 40px 10px orange,
               0px 0px 10px 20px purple,
               0px 0px 10px 30px yellow; 
 box-shadow: 0px 0px 20px red, 0px 0px 40px 10px orange,
               0px 0px 10px 20px purple inset,
               0px 0px 10px 30px yellow inset; 

En los ejemplos se ha visto que se pueden usar indistintamente colores en formato hexadecimal o formato nombre, pero tambien se puede usar el formato rgba. Este último se expresa en la forma rgba(255,255,255) -blanco- y tiene la peculiaridad de que nos permite indicar en su cuarto parámetro el nivel de opacidad, pudiendo conseguir así una infinidad de variantes. Ejemplo, negro con 50% de opacidad: rgba (0,0,0,0.5). No todos los navegadores y sus distintas versiones reconocen box-shadow en su forma estándar, por lo que conviene usar los distintos kits de compatibilidad. De esta manera, para que los efectos de sombras sean visibles en la mayor parte de ellos, usaremos de forma conjunta las siguientes propiedades. La de Explorer me la salto porque es bastante complicada y casi que requiere de un monográfico. Siempre tenéis que recordar que la versión estándar en esta y otras propiedades CSS, debe ir la última:

-moz-box-shadow:10px 10px 5px #000; -webkit-box-shadow:10px 10px 5px #000;  box-shadow:10px 10px 5px #000;

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter