Páginas

Pesquisar

..."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.




  • meneame
  • Bitacoras
  • Delicious
  • Facebook
  • Blogger
  • Twitter
  • Wikio
  • Google Buzz
fonte e créditos:

0 comentários:

Postar um comentário

Mensagem do formulário de comentário:

Arq.

ebds