CSS Drop Shadow. Aplicar sombra con CSS

0 - - 30/11/2005 00:00:00

Hasta que la propiedad de CSS3 box-shadow sea incorporada plenamente por los navegadores, para incorporar sombra a cajas debemos ingeniarnoslas de algún modo. Existen diversos modos de plantear el tema, así como numerosos tutoriales, pero que el propósito de este blog no es inventar la rueda, sino aportar ejemplos claros y concisos, a continuación muestro mi forma de hacerlo. No es perfecta puesto que el acabado podría mejorarse pero el resultado es más que aceptable sin necesidad de complicar el CSS ni el XHTML. Lo único que necesitamos es una pequeña imagen que hará las veces de sombra.

CSS

img{
	padding: 5px 5px 9px 5px;
	background-color: #FFF;
	background-image: url(Imagenes/sombra.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-top: 1px solid #DDD;
	border-right: 1px solid #DDD;
	border-left: 1px solid #DDD;
}

XHTML

<img src="Archivos/Noviembre2005/imagen_borde.jpg" width="150" height="128" alt="imagen con sombra" />


imagen con sombra

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha