Efecto de sombra con CSS

Veremos varios métodos para realizar un efecto de sombreado utilizando hojas de estilo en cascada. He encontrado 3 métodos distintos para hacer un efecto de sombra. Son los siguientes, que veremos comentados en este artículo:  Método background-color Método canal alpha Método estirar imagen Método Background color  Este método es bastante simple. Se basa en definir tres cajas trasladadas, con diversos colores de fondo. Los elementos con las clases "blur" y "shadow" se definirán con tonos grisáceos para crear el efecto de sombreado.  Código HTML:  <div class="blur">  <div class="shadow">  <div class="content">bla bla</div>  </div>  </div>  Código CSS:  .blur{     background-color: #ccc; /*shadow color*/     color: inherit;     margin-left: 4px;     margin-top: 4px;  }  .shadow,  .content{     position: relative;     bottom: 2px;     right: 2px;  }  .shadow{     background-color: #666; /*shadow color*/     color: inherit;  }  .content{     background-color: #fff; /*background color of content*/     color: #000; /*text color of content*/     border: 1px solid #000; /*border color*/     padding: .5em 2ex;  }  La única desventaja de este método es que usa colores definidos para las sombras y ello puede dar lugar a que no se pueda mezclar este efecto con otros elementos. Con un fondo blanco, las sombras en grises quedan bien, pero pongamos el caso de que el fondo de la página fuera de color rojo. Entonces el efecto de sombreado debería realizarse con tonos rojos oscuros.  Podemos ver el ejemplo en funcionamiento en una página aparte.  Método canal alpha  Este método es muy parecido al anterior, pero soluciona el problema de mezclarse con otros elementos. Es indiferente cual sea el fondo de la página donde se va a mostrar el elemento sombreado, incluso si el sombreado se realiza en la misma página sobre distintos fondos. Utiliza imágenes de fondo en formato PNG "alpha transparentes", en lugar de colores definidos en la hoja de estilo.  El código HTML necesario es el mismo que para el ejemplo anterior, simplemente debes modificar el código CSS, en concreto para las clases "blur" y "shadow". Mostramos el código CSS para este ejemplo.  <style type=text/css>  .blur{     background: transparent url(shadow1.png);  /*ruta para el 80%-transparente 1x1 pixel coloreado de negro */     color: inherit;     margin-left: 4px;     margin-top: 4px;  }  .shadow{     background: transparent url(shadow2.png);  /*ruta para el 60%-transparent 1x1pixel coloreado de negro */     color: inherit;  }  .shadow,  .content{     position: relative;     bottom: 2px;     right: 2px;  }  .content{     background-color: #fff; /*background color of content*/     color: #000; /*text color of content*/     border: 1px solid #000; /*border color*/     padding: .5em 2ex;  }  </style>  Para probar la ventaja de este tipo de fondo, podemos cambiar el color de fondo de la página web y veremos como la sombra también cambia de color.  Las dos imágenes, de 1x1 pixel medio transparentes que se necesitan para componer este ejemplo están aquí:  Pulsar para descargar imagenes-transparentes.zip  Podemos ver el ejemplo en funcionamiento en una página aparte .  Método estirar imagen  Opino que los dos métodos anteriores no son demasiado buenos, debido a que la sombra no parece muy natural. Dicho de otro modo, no resulta un efecto suficientemente realista. De modo que abro mi editor gráfico, creo una caja rectangular con efecto de sombra y lo exporto a una imagen. Posiblemente pueda utilizar esa imagen para crear el efecto de sombra.  El código HTML experimental  <div class="shade">  <img src="shadow.png" width="0" height="0" alt="" class="shade" />  bla bla</div>  El código CSS experimental  img.shade{     width: 37ex;     height: 9em;  /* specify the dimension of the image */     display: block;     position: absolute;     z-index: -1;  /* force the image to show below the content */     right: -3ex;     bottom: -1em;  }  div.shade{     width: 30ex;     height: 6em;  /* specify the dimension of the content, slightly smaller than the image */     position: relative;     z-index: 1;  /* force the content to show above the image */     background-color: #fff;     border: 1px solid #000;     padding: 1em 2ex;     margin-right: 6ex;     margin-bottom: 3em;  }  Tenemos tres desventajas en este método  Como la imagen se estira, puede que no quede muy bonito. En Mozilla Firefox la imagen a veces desaparece (se puede recuperar refrescando o desplazando la página). En Internet Explorer no se muestra bien el efecto, por lo menos en la versión 6. El contenido no puede flotar (no podemos utilizar el atributo float) Podemos obtener la imagen para hacer el ejemplo.  Podemos ver este ejemplo en marcha en una página aparte.  Un momento. ¿Cómo haríamos texto con sombreado?  Si utilizas un navegador basado en Gecko, podrías visualizar otro efecto interesante para realizar sombreado de textos sin utilizar imágenes y redimensionable simplemente cambiando el tamaño del texto o las fuentes que usa el navegador (con el menú view>text size > increase / Decrease).  El código HTML sería el siguiente:  <span id="text">Texto sombreado</span>  El código CSS  #text{     font-size: 3em; /* optional. just to increase the font size. */     display: block;     line-height: 1em;     color: #666; /* shadow color */     background-color: transparent;     white-space: nowrap; /* wrapping breaks the effect */  }  #text:before,  #text:after{     content: "Texto sombreado"; /* El mismo texto que queramos mostrar sombreado */     display: block;  }  #text:before{     margin-bottom: -1.05em;     margin-left: 0.1ex;     color: #ccc; /* shadow color */     background-color: transparent;  }  #text:after{     margin-top: -1.05em;     margin-left: -0.1ex;     color: #fff; /* text color */     background-color: transparent;  }  Este efecto puede ser útil por ahora. Sin embargo, las especificaciones de CSS2 incluyen una propiedad CSS llamada text-shadow, que sirve para definir un efecto de sombra a un texto. Sin embargo, la mayoría de los navegadores todavía no soportan esta propiedad.