Sombra a elementos con CSS3


       Durante mucho tiempo se han usado (y se siguen usando) imágenes para simular sombreado de los diferentes elementos de una página web, así parece que están por encima del fondo, da profundidad a la web.

       Actualmente se pueden realizar muchos efectos de sombreado directamente en CSS3, con box-shadow. Es una propiedad que funciona en todas las versiones más modernas de todos los navegadores. IE9, Firefox, Chrome, Safari, Opera, IOS y Android y Blackberry, aunque en estos dos últimos todavía hay que usar el prefijo -webkit-.

       El uso básico sería:

#elemento1{
     box-shadow:10px 10px #666;
}


Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.


       Ahí estamos diciendo que queremos 10 píxeles de sombra hacia la derecha y hacia abajo, de color gris oscuro. El primer valor es horizontal, positivo significa derecha, negativo izquierda. El segundo vertical, positivo hacia abajo y negativo hacia arriba.

       La sombra queda muy sosa y brusca, y da poca profundidad. Para eso necesitamos desenfocar la sombra, el efecto blur, que es el tercer parámetro:

#elemento2{
    box-shadow:10px 10px 10px #666;
}


Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.


       Vemos que así queda mucho mejor, da sensación de profundidad y parece más una sombra. También podemos jugar poniendo varias sombras, separadas por comas. Por ejemplo:

#elemento3{
    box-shadow:10px 10px 10px #666,-5px -5px 5px #616;
}

Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula.



       Ahora tenemos una sombra gris por un lado y otra morada por otro. Jugando con el tamaño y color de bordes y poniendo diferentes formas se pueden lograr efectos muy aparentes, eso ya es tener arte.