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.
No existe un valor máximo formal en la especificación CSS para desenfoque o tamaño. Sin embargo, valores muy altos suelen ser innecesarios ya que se vuelven indistinguibles a medida que se extiende más allá de los límites del elemento.
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.
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 más desde el tamaño definido.
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;
Aunque actualmente esta propiedad está aceptada en todos los navegadores, recuerda que para este tipo de propiedades, para el caso de navegadores antiguos, 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;}
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
Comprueba tu apendizaje
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.