Blog and Web

Ponerle sombra a las imagenes con CSS

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.
  3. #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 */
    }
  4. Ahora sólo aplicamos esta clase a las imágenes que deseamos salgan con sombra de esta forma:
  5. <div id="sombra">
      <img src="mi_imagen.jpg">
    </div>

Ver ejemplo en funcionamiento.