..."efecto sombra en div. Hack para IE. CSS...aplicar"

En el diseño de mi actual plantilla me plantee usar pocas imágenes y mucho CSS para darle aspecto a la misma. Hasta ahora me resistía a utilizar el efecto sombra con CSS por lo diferente que se veía en IE con respecto a los demás navegadores.



Realmente el efecto en IE no quedaba bien, la solución llego de la mano de Stu Nicholls, con su hack queda solucionado el problema con IE y es muy fácil de usar. Yo he adaptado su solución y modificado su código, reduciéndolo un poco pero el resultado es el mismo, aunque me imagino que para IE5 e IE6 no funcionara esta modificación (no me importa).
Para conseguir el mismo resultado debemos añadir a nuestro CSS

---------------------------------------------------------------------

.sombra {
background:#000;
float:left;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.subsombra {
position:relative;
float:left;
background:#fff;
}

-----------------------------------------

Para aplicarlo en un div solo debemos añadir esas dos clases, veamos un ejemplo para aplicarlo al cuerpo de nuestra plantilla

Código original

-----------------------------------------------

<div id='outer-wrapper'>
AQUI TODO EL CODIGO HTML DE LA PLANTILLA...
</div> <!-- end outer-wrapper -->

-------------------------------------------------

Aplicar efecto sombra

 ---------------------------------------------------------------

<div id='outer-wrapper'>
<div class='sombra'>
<div class='subsombra'>
AQUI TODO EL CODIGO HTML DE LA PLANTILLA...
</div>
</div>
</div> <!-- end outer-wrapper -->

-----------------------------------------------------------------------------------

Simplemente con este hack logramos que en todos los navegadores se aplique el efecto sombra por igual.

• 
  
  

fonte e créditos:

http://humanossinsentido.blogspot.com/2010/03/aplicar-efecto-sombra-en-div-hack-para.html