Tabla de contenidos
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.
El formato es prácticamente el mismo para las dos propiedades.
Significado de las propiedades:
Importante:
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);
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.
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
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
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.