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.

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

text-shadow: 3px 4px 0px #fff;
box-shadow: 10px 10px 14px 2px rgba(0,0,0,0.47);

• 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.

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. Algunas herramientas online útiles son las siguientes:

Generador de sombras en textos: css3gen.com/text-shadow/

Generador de sombras en cajas o contenedores: cssmatic.com/box-shadow

Comprueba tu aprendizaje

Ejercicios propuestos

Actividad 4.

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.