CSS Drop Shadow. Aplicar sombra con CSS

Comentarios 0 COMENTARIOS
Tags 30/11/2005 -  Tags

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

Algunas entradas relacionadas:

También te puede interesar: