English Português

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. css-efecto-sombra.gif

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

Ver ejemplo en funcionamiento.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Kom / Hace 9 años /

      en que parte del codigo se ponen estos dos codigos bajo que etuiquetas gracias

      Responder a Kom →
    2. monce / Hace 8 años /

      wolazzzzzzz komo taz espero y bien

      Responder a monce →
    3. Omar / Hace 8 años /

      Gracias me sirvio bastante

      * Kom se pega antes de /b:skin en la parte css de tu plantilla

      Responder a Omar →
    4. jabib / Hace 6 años /

      ola k tal

      Responder a jabib →
    5. Alexis / Hace 5 años /

      hola perfecto eejmplo css gracias

      Responder a Alexis →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad