Como proyectar sombra usando CSS

By | 2012/07/04

Uno de mis más grande dolores de cabeza era tener que agregarle a todas las imagenes de un sitio web sombra una por una.

Afortunadamente lo podemos resolver utilizando css.

Del lado del archivo css creamos:

.shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, 
        Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, 
        Direction=135, Color='#000000');
}

Y como siempre en el html:

<img src=”mi_imagen.png” class=”sombra”>

Category: CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.