feed twitter facebook LinkedIn facebook

CSS » Imagenes con sombra en CSS

enero 4, 2007 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

CSS nace con la idea de ayudarnos en el diseño de nuestras páginas web. Con la finalidad de dar vida y colorido a las encorsetadas páginas HTML. Este ejemplo nos explica como utilizar CSS para poner una sombra a una imágen, de tal manera, que esta, nos quede más "resultona".

La idea general será la de poner una imagen dentro de una capa. Posteriormente mover la imágen hacia la izquierda y hacia arriba. De esta manera queda "como por encima" de la capa. De esta manera podremos utilizar la capa para crear la sombra.

Lo primero que tenemos que hacer es crear una capa con una imágen dentro.

<div class="sombra">
  <img src="lineadecodigo.jpg" title="linea de codigo"/>
</div>

A dicha capa le asignaremos un estilo CSS. En este caso lo hemos llamado sombra. A si que ahora deberemos de empezar a manipular dicho estilo y las imagenes contenidad dentro del mismo.

Hemos dicho que la imagen hay que desplazarla a la izquierda y arriba. Para ello jugamos con la propiedad .margin de CSS. De esta manera sus margenes izquierdo y superior serán negativos.

Veamos el código:

.sombra img {
   display: block;
   position: relative;
   margin: -6px 6px 6px -6px;
}

Además hemos añadido otros atributos como la forma de visualización (display). La cual hemos indicado que sea un bloque. El tipo de posicionamiento (position), el cual hemos indicado que sea relativo. Es decir, hace referencia al sitio donde está ubicada la imágen.

Ahora que tenemos desplazada la imagen, lo que deberemos de hacer es definir el estilo de la capa. Esta, al quedar detras de la imágen vendra a tener la sombra. Para ello tenemos dos alternativas:

  • Utilizar una imágen de fondo de la capa. Si queremos una sombra degradada
  • Un fondo gris. Si queremos una sombra más compacta.

Quizas la segunda forma sea más rustica, pero es la más simple y la que hace que no requeramos de algún programa de manejo de gráficos para generar el difuminado.

Es por ello que nuestro estilo sombra quedará de la siguiente forma:

.sombra {
   float:left;
   background-color: #A7A7A7;
}

Utilizamos el atributo background-color para indicar el color gris (#A7A7A7) como sombra.

Solo nos queda un pequeño inconveniente. Y es que al desplazar los margenes de la imagen, estos se comerán el contenido que pongamos fuera de la capa. Es por ello que deberemos de aumentar los margenes de la clase sombra. Finalmente nuestra clase sombra queda como sigue:

.sombra {
   float:left;
   background-color: #A7A7A7;
   margin: 10px 0 0 5px;
}

El efecto será el siguiente:

Foto de Línea de Código


La página HTML sería:

<html>
<head>
<style>
.sombra {
   float:left;
   background-color: #A7A7A7;
   margin: 10px 0 0 5px;
}

.sombra img {
   display: block;
   position: relative;
  background-color: #fff;
  margin: -6px 6px 6px -6px;
}
</style>
</head>

<body>

<div class="sombra">
  <img src="lineadecodigo.jpg" title="linea de codigo" width="100px" height="100px"/>
</div>

</body>
</html>

Podeis leer más sobre el tema y ver como se utiliza el degradado de la sombra con imagenes en CSS Drop Shadows

tags:

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Marcelo Arias
    enero 9, 2007 #

    Muy buena técnica

  2. Menhir
    enero 10, 2007 #

    Excelente técnica. Simple y muy efectiva. Mis felicitaciones.

  3. Daniel Rodríguez
    enero 10, 2007 #

    Excelente camarada ahora hay que aplicarla en nuestros desarrollos WEB

  4. ale
    julio 24, 2007 #

    Buenisimo, muy facil y practico

  5. carlos A. Cifuentes C.
    septiembre 13, 2007 #

    Quiero imagenes de las clases de lineas ok.

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*