Con CSS se pueden aplicar dos tipos de sombras: sombras a elementos HTML y sombras a textos. Con ellas podemos conseguir un efecto visual más elegante a nuestras páginas.

Un efecto interesante que podemos utilizar en nuestros diseños web a partir de CSS3 es el de las sombras. A través de dos propiedades, box-shadow y text-shadow, se nos permite crear sombras a dos tipos de elementos diferentes respectivamente:

Propiedad Valor Significado
text-shadow: pos-x pos-y blur color | none Aplica una sombra a un contenido de texto.
box-shadow: pos-x pos-y blur tamaño color | none | inset Aplica una sombra a una caja o contenedor.

Con los valores pos-x y pos-y podemos indicar la posición de la sombra respecto al texto o capa original. El valor blur nos permite indicar el radio de desenfoque en píxeles, especificando así lo borrosa que estará la sombra (cuanto más alto el valor, más borrosa la sombra).

div {
    box-shadow: 2px 2px 10px #666;          /* Sombra normal */
    box-shadow: 5px -5px 0 2px #444;        /* Sombra superior sin desenfoque */
    box-shadow: 5px 5px 25px #222 inset;    /* Sombra interior */
}

Truco: Puedes añadir la palabra clave inset al final de los valores de la propiedad box-shadow para aplicar la sombra hacia el interior, en lugar del exterior.

Sombras múltiples

Una de las características interesantes de CSS3 con background era la posibilidad de indicar fondos multiples separando por comas. En el caso de las sombras, también podemos hacer lo mismo, consiguiendo efectos muy vistosos:

p {
    text-shadow: 2px 2px 0 #AAA,        /* Sombra 1 */
                 6px 6px 2px #777,      /* Sombra 2 */
                 12px 12px 8px #444;    /* Sombra 3 */
}

Sombra flexible

En el módulo de filtros CSS existe también una función denominada drop-shadow que puede utilizarse en un filtro. Dicha función permite aplicar una sombra idéntica a un objeto determinado, que podría ser una imagen PNG con transparencias, resultando una sombra flexible según la forma de la imagen.

img {
    filter: drop-shadow(5px 5px 10px #444);
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).