sinprogramar.blogspot.com

16/3/10

Sombreados con CSS para todos los navegadores

Ya es posible añadir bordes sombreados a nuestro HTML y de forma automática gracias a las recientes actualizaciones de Firefox y Safari. Para Internet Explorer los filtros nos dan su resultado equivalente.

Para aplicar un sombreado lo mejor es hacer un div que contenga por un lado el contenido y por otro un div que le aplicaremos el sombreado.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">

.sombra{

box-shadow: 4px 4px 4px #666;
-moz-box-shadow: 4px 4px 4px #666;
-webkit-box-shadow: 4px 4px 4px #666;
filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3,MakeShadow=true,ShadowOpacity=0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3,MakeShadow=true,ShadowOpacity=0.5)";
background: #666;
width:200px;
height:200px;
z-index:1;
}
.caja{
width:200px;
height:200px;
position:relative;
margin:20px;
}
.contenido{
width:200px;
height:200px;
position:absolute;
z-index:2;
background-color:#FFF;
}

</style>
</head>


<body>
<div class="caja">
<div class="contenido">Bla bla bla bla bla bla bla bla bla bla bla bla bla</div>
<div class="sombra"></div>
</div>
</body>

</html>

La caja contenedora tiene un posicionamiento relativo y el contenido y la sombra posición absoluta. Esto nos permite posicionar la sombra en el fondo con un z-index:1.

Se puede variar la oscuridad y longitud de la sombra modificando la clase sombra. Hay que tener en cuenta cada linea actúa sobre un navegador distinto.

También remarcar que sólo funcionan para las últimas versiones de Firefox, Safari y para Explorer 6 y superiores.

Podéis ver este y otros efectos de CSS3 en css3please.com.

No hay comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.


Creative Commons License