Efecto sombra en imágenes con CSS

Una buena forma para conseguir un logrado efecto sombra en imágenes mediante CSS (Cascading Style Sheets) es alojando la imagen a la que se desea aplicar dicho efecto (<img>) dentro de una etiqueta <div>, que será la encargada de contener el sombreado, que se logrará utilizando imágenes (formato GIF / formato PNG):

<div class="img-shadow">
<img src="vista.jpg" alt="Efecto sombra en imágenes con CSS" />
</div>

El estilo a aplicar tanto a la etiqueta <div> como a la etiqueta <img> será:

.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

Se puede observar en los estilos el uso de !important, que indica que esa declaración toma precedencia respecto a una declaración "normal" del mismo elemento:

background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right; 

En la primera declaración se utiliza para obtener el efecto sombra una imagen en formato PNG ya que permite transparencias e independientemente del fondo donde se sitúe la imagen a aplicar el sombreado, el efecto será el deseado. En cambio, en la segunda declaración se utiliza una imagen en formato GIF que no permite transparencias por lo que el efecto sombra sólo funcionará sobre fondos idénticos al de la imagen que contiene la sombra, en ese caso, el blanco.

Como Internet Explorer no soporta transparencia de imágenes PNG hasta la versión 7, con estas dos declaraciones se persigue que aquellos navegadores que soporten transparencia se queden con la primera declaración, mientras que aquellos que no la soporten, utilicen la segunda.

Para solucionar problemas con transparencias de imágenes en formato PNG con Internet Explorer visitar el enlace Problema con PNG en Internet Explorer.

Aquí se puede ver un ejemplo de imagen con efecto sombra.

Fuente: CSS Drop Shadows.