Obtener sombras con CSS

Sencilla porque se utiliza lo básico de CSS. La idea es tener cinco DIVs anidados. 3 de ellos tendrá un tono de gris. Luego se los distribuirá para formar la sombra. Por lo tanto el esquema es:

Esquema de sombras

Y el resultado:

Resultado Final

Entonces dentro de <body> en el HTML creamos los 5 DIVs:

HTML

<div id= "contenedor">
<div class = "sombra1">
   <div class = "sombra2">
    <div class = "sombra3">
     <div class = "caja">
      El contenido va aqui
     </div>
    </div>
   </div>
</div>
</div>

En el estilo en cascada coloreamos a cada uno y los distribuimos:

CSS

* {
position : relative ; /*Importante*/
}

#contenedor .sombra2, #contenedor .sombra3, #contenedor .caja {
left : -2px; /*Posicionamiento de los DIVs*/
top : -2px;
}

#contenedor .sombra1 {
background-color : #CCC; /*Coloreamos el fondo*/
}

#contenedor .sombra2 {
background-color : # 999 ;
}

#contenedor .sombra3 {
background-color : # 666 ;
}

#contenedor .caja {
background-color : #FFF;
border : 1px solid #CCC; /*Le damos borde a la caja y padding*/
padding :10px;
}

Testeado en FF 2.0 y IE 6.

Autor: Leandro D´Onofrio
http://www.leandrodonofrio.com

Usuarios que han visto este tema también han visto...

- Opacity en CSS
- Relativamente Absoluto
- FLOAT en CSS
- Estilo de la primera letra con CSS
- Creando esquinas redondeadas usando CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento