"Sombras con CSS"

Sombras com CSS

La propiedad box-shadow nos permite añadir sombra a una imagen, párrafo o bloque (DIV).

El problema es que esta propiedad no está disponible en todos los navegadores y debemos añadir la propiedad que cada navegador va incorporando.

Estos datos son proporcionados por Vagabundia y es cuestión de recordarlos.

Firefox 3.5 en adelante:
-moz-box-shadow: 5px 5px 5px #C0C0C0;

WebKit, Chrome y Safari:
-webkit-box-shadow: 5px 5px 5px #C0C0C0;

Internet Explorer 8
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";

Internet Explorer en general:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

Para versiones de Internet Explorer anteriores a la 8 es necesario añadir width o height.
Podemos añadir los estilos de la sombra directamente donde vamos a añadirla.

Esto sería el contenido del bloque

<div style="-moz-box-shadow: 0px 0px 8px #C0C0C0; border: 1px solid rgb(204, 204, 204); margin-bottom: 1.5em; padding: 1px;"><div style="padding: 0.5em; text-align: center;">Esto sería el contenido del bloque</div></div>

También podemos añadirlos a la hoja de estilos antes de ]]></b:skin>

.sombra-div {
height:30px;
padding: 10px;
width: 450px;
font-size: 18px;
margin: 10px auto;
text-align: center;
border: 1px solid #C0C0C0;
background-color:#F0C2D1;

-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

}

Donde queremos mostrar el DIV añadimos:

<div class="sombra-div">

Esto sería el contenido del bloque

</div>

Si lo que añadimos es una imagen:

.sombra-image {
padding: 0.1em;
width: 200px;
height: 210px;
background-color:#FFF;
border: 1px solid #C0C0C0;

-moz-box-shadow:4px 4px 3px #ccc;
-webkit-box-shadow: 4px 4px 3px #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

}

<div class="sombra-image"><img src="url-imagen" border="0" /></div>

O un texto cualquiera

Aquí cualquier texto

.sombra-tex {
text-shadow: 2px 3px 4px #000;
color: #F0C2D1;
font-size: 48px;

filter: progid:DXImageTransform.Microsoft.Shadow(color=#C0C0C0,direction=125,strength=5);

}

<p class="sombra-tex">Aquí cualquier texto </p>

Sorte Bilosony2 ™

fonte e créditos: 

gemablog