Tema: Efecto sombra con css? como mejorarlo
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 02/03/2010, 13:22
AlbertoGarcia
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 15 años
Puntos: 19
Respuesta: Efecto sombra con css? como mejorarlo
Éste sería un método algo menos complicado, es casi igual que el método Gilder/Levin de sustitución de imágenes pero usando los márgenes del div que queda debajo para meter la imagen con la sombra. Para la imagen de la sombra (shadow.jpg) he creado un archivo con una sombra inferior y derecha de 4px de ancho.

Si pones un borde a cada uno de los divs 'nav' y 'shadow' verás como queda uno debajo de otro con el mismo tamaño pero desplazado el de debajo. (#nav, #shadow {border: dotted 1px #000;})

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3.     <head>
  4.         <meta name="generator" content="HTML Tidy, see www.w3.org">
  5.         <meta http-equiv="Content-type" content= "text/html; charset=utf-8">
  6.         <title>Sombra</title>
  7.         <style type="text/css">
  8.         <!-- * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         
  13.         li {
  14.             display: inline;
  15.             padding: 1em;
  16.         }
  17.         
  18.         a {
  19.             font-size: 2em;
  20.             color: #fff;
  21.         }
  22.         
  23.         #container {
  24.             width: 800px;
  25.             margin: 2em auto;
  26.         }
  27.         
  28.         #shadow {
  29.             display: block;
  30.             width: 600px;
  31.             height: 60px;
  32.             float: left;
  33.             position: relative;
  34.             background: url(picts/shadow.jpg) no-repeat bottom right;
  35.         }
  36.         
  37.         #nav {
  38.             width: 100%;
  39.             height: 100%;
  40.             position: absolute;
  41.             margin: -4px -4px 0;
  42.             background: darkred url(../picts/main-logo.gif) no-repeat bottom left;
  43.         }
  44.         -->
  45.         </style>
  46.     </head>
  47.     <body>
  48.         <div id="container">
  49.             <div id="shadow">
  50.                 <div id="nav">
  51.                     <ul>
  52.                         <li>
  53.                             <a href="#">item</a>
  54.                         </li>
  55.                         <li>
  56.                             <a href="#">item</a>
  57.                         </li>
  58.                         <li>
  59.                             <a href="#">item</a>
  60.                         </li>
  61.                         <li>
  62.                             <a href="#">item</a>
  63.                         </li>
  64.                     </ul>
  65.                 </div>
  66.             </div>
  67.         </div>
  68.     </body>
  69. </html>

Si tienes dudas avisa, Salud!