Sombras con box-shadow y CSS3

Aplicar sombras a los elementos de la Web por fin podremos hacerlo de una forma sencilla con CSS3, adios a esas tediosas imégenes para crear el efecto!!!.


 
Como ya sabemos CSS3 sólo esta soportado por los navegadores modernos y como todavia esta pendiente de su especificación final, sus nuevos atributos no están soportados de igual forma por todos estos navegadores.

Por lo tanto, para crear sombras en los distintos navegadores (los basados en Webkit como Safari y Chrome; basados en Mozilla; en Opera; y en Internet Explorer mediante filtros) lo hariamos de la siguiente forma:

.sombra{
    box-shadow: 5px 5px 5px #ccc;
   -webkit-box-shadow: 5px 5px 5px #ccc;
   -moz-box-shadow: 5px 5px 5px #ccc;
   /* IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')";
   /* IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc');
}

Este ejemplo nos creará una sombra de color gris (#ccc) desplazada hacia abajo y a la derecha.