Sombras CSS en texto y contenedores o cajas

Sombras en texto y contenedores o cajas con CSS

Gracias a las propiedades de CSS3 «text-shadow» y «box-shadow» podemos aplicar sombras en los textos y en los contenedores para así enriquecer nuestras interfaces.

1. Propiedades text-shadow y box-shadow

El formato es prácticamente el mismo para las dos propiedades.

• text-shadow: posx posy desenfoque color | none;
• box-shadow: posx posy desenfoque tamaño color inset | none;

Significado de las propiedades:

• posx: sombra que se aplica en el eje horizontal.
• posy: sombra que se proyecta en el eje vertical.
• desenfoque o blur: cantidad de sombra borrosa.
• tamaño: tamaño de la sombra hacia los lados.
• color: color de la sombra.
• inset: posiciona la sombra dentro del marco.

Importante: 

• Para aplicar sombras arriba y a la izquierda se deben utilizar valores negativos.
• Para aplicar doble sombra se pueden poner dos valores separados con coma.
• Recuerda que para este tipo de propiedades debemos incluir los prefijos para navegadores.

Ejemplo

Veamos por ejemplo qué significan los valores de la propiedad «text-shadow» del siguiente ejemplo:

text-shadow: 3px 4px 0px #fff;

• 3px: es el tamaño de la sombra que se aplica a la derecha del texto.
• 4px: es la sombra que se proyecta hacia abajo.
• 0px: es la cantidad de sombra borrosa que se aplica.
• #fff: es el color de la sombra. Se puede aplicar también en RGBA y HSLA.

Para aplicar sombras arriba y a la izquierda se deben utilizar valores negativos.

Ejemplo

Veamos también un ejemplo de «box-shadow»:

box-shadow: 10px 12px 14px 2px rgba(0,0,0,0.47);

• 10px. La sombra estará desplazada 10 píxeles hacia la derecha desde el borde del elemento.
• 12px. La sombra estará desplazada 12 píxeles hacia abajo desde el borde del elemento.
• 14px. La sombra tendrá un desenfoque de 14 píxeles, lo que hará que la sombra tenga un aspecto difuso y suave.
• 2px. La sombra se extenderá 2 píxeles desde el tamaño definido por el blur-radius.
• color: rgba(0,0,0,0.47). El color de la sombra será un gris oscuro con una opacidad de 0.47, lo que significa que la sombra será algo transparente.

Ejemplo

Para aplicar varias sombras se puede añadir una lista de sombras separadas por comas. En el siguiente ejemplo se aplicarían dos sombras.

text-shadow: 3px 4px 0px #fff, 2px 2px 1px #ccc;

Recuerda que para este tipo de propiedades debemos incluir los prefijos para navegadores correspondientes.

Ejemplo

Prueba las siguientes propiedades sobre diferentes párrafos y observa las diferencias entre los distintos valores.

.shadow1 { text-shadow: 3px 3px 2px rgba(152, 150, 207, 0.7);}
.shadow2 {box-shadow: 10px 10px 14px 2px rgba(0,0,0,0.47);}
.shadow3 {box-shadow: 5px 1px 4px 2px #45f875 inset;}
.shadow4 {text-shadow: 3px 4px 0px grey, 2px 2px 1px yellow;}

0

2. Generadores de sombra online

Para facilitarnos la tarea de la creación de sombras podemos utilizar un generador de sombras tanto para los textos como para las cajas o contenedores.

Generador de sombras en textos y cajas o contenedores: cssgenerator.org/box-shadow-css-generator.html

Test

Ejercicio propuesto

Define una sombra inferior negra en el menú de tu proyecto web de 10px de desplazamiento vertical y con un desenfoque de 15px. Agrega también una sombra de tipo texto en uno o más encabezados que disponga de 4px de desplazamiento horizontal y vertical y 2px de desenfoque.