Inicio de sesión
RSS
En línea
En este momento hay 1 usuario y 1 invitado en línea.
Obtener sombras con CSS
Fecha:
25.03.2007 - 20:20Sencilla 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:
Y el resultado:
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>
<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;
}
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.
Marcar/Buscar este post con:
