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.

Deja un comentario