Efecto de sombra en imágenes

Sombra sin imágen

Para lograr este efecto solo es necesario emplear un DIV para cada imágen que se quiera dar el efecto de sombra. No utiliza imagen adicional.

CSS code

.sombra { float:left; padding:0 2px 2px 0; background-color:#999; margin-left:4px; margin-top: 4px; } .sombra img { display:block; position:relative; top: -4px; left:-4px; padding:8px; background:#FFFFFF; border:1px solid; margin:0; border-color: #CCCCCC #666666 #666666 #CCCCCC }

Sombra con imágen de fondo

Este ejemplo es muy similar al anterior pero utiliza una imágen de fondo que se define en el archivo CSS. Su principal desventaja es que emplea una imagen = más peso (aunque no es demasiado) y segundo es que la imágen de la sombra debe tener un tamaño mínimo al tamaño de la imágen más grande que se desee aplicar este efecto.

CSS code

.sombra { float:left; padding:0 2px 2px 0; background: url(sombra.gif) no-repeat bottom right; margin-left:4px; margin-top: 4px; } .sombra img { display:block; position:relative; top: -4px; left:-4px; padding:8px; background:#FFFFFF; border:1px solid; margin:0; border-color: #CCCCCC #666666 #666666 #CCCCCC }

HTML code

<div class="sombra"><img src="girasol.jpg" alt="girasol"/></div>

Archivo de la imágen del segundo ejemplo