Sencilla forma para obtener sombras con CSS
Miércoles, 14 de Febrero de 2007 06:06
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
  1. <div id="contenedor">
  2.   <div class="sombra1">
  3.     <div class="sombra2">
  4.       <div class="sombra3">
  5.         <div class="caja">
  6.         El contenido va aqui
  7.         </div>
  8.       </div>
  9.     </div>
  10.   </div>
  11. </div>



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

CSS
  1. *{
  2. position: relative; /*Importante*/
  3. }
  4.  
  5. #contenedor .sombra2, #contenedor .sombra3, #contenedor .caja {
  6. left: -2px; /*Posicionamiento de los DIVs*/
  7. top: -2px;
  8. }
  9.  
  10. #contenedor .sombra1 {
  11. background-color: #CCC; /*Coloreamos el fondo*/
  12. }
  13.  
  14. #contenedor .sombra2 {
  15. background-color: #999;
  16. }
  17.  
  18. #contenedor .sombra3 {
  19. background-color: #666;
  20. }
  21.  
  22. #contenedor .caja {
  23. background-color: #FFF;
  24. border: 1px solid #CCC; /*Le damos borde a la caja y padding*/
  25. padding:10px;
  26. }

 

Testeado en FF 2.0 y IE 6 

Resultado final 

 

 
 

Agregue su comentario

Tu Nombre:
Tu email:
Tu sitio web:
Comentario:
yvComment v.1.23.0