Sombra CSS

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:

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);
}