Blog and Web

Este es una técnica para ponerle una ’sombra’ a las imágenes mediante el uso de propiedades CSS. Consiste esencialmente en poner un fondo a la imagen (background) que contiene la sombra y desfasar un poco la imagen con un padding para que la muestre en menor o mayor medida. Vas a ver paso por paso:

1. Crea una imagen de sombra. Esta será la imagen de fondo y que creara el efecto de sombra, el tamaño de esta imagen debe ser del tamaño de la imagen más grande que uses. Y puede ser como la siguiente (Puedes usar la siguiente sí gustas):



2. Ahora creamos una clase que tendrá como fondo la sombra y de contenido la imagen.

#sombra {
float:left;
padding:0 5px 5px 0; /*Esta es la profundidad de nuestra sombra, sí haces más grandes estos valores, el efecto de sombra es mayor también */
background: url(http://unibicación-de-la-imagen-de-sombra.gif) no-repeat bottom right; /*Aquí es donde ponemos la imagen como fondo colocando su ubicación*/
} 

#sombra img {
display:block;
position:relative;
top: -3px; /* Desfasamos la imagen hacia arriba */
left:-3px; /*Desfasamos la imagen hacia la izquierda */
padding:5px;
background:#FFFFFF; /*Definimos un color de fondo */
border:1px solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC /*Creamos un marco para acentuar el efecto */
}

3. Ahora sólo aplicamos esta clase a las imágenes que deseamos salgan con sombra de esta forma:

<div id="sombra">
  <img src="mi_imagen.jpg">
</div>

Ver ejemplo en funcionamiento.