Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...

Suscríbete a través del feed RSS
Recibe los últimos artículos a tu e-mail
Realizar una búsqueda
Sencilla forma para obtener sombras con CSS Compartelo!
miércoles, 14 de febrero de 2007
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 

 

 

¿Te interesó este artículo?Puedes suscribirte al feed RSS ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 2255 personas que siguen al blog





 Comentarios


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code
 
< Anterior   Siguiente >
[Volver]