Div's sombreados con CSS

Este codigo nos ayudará a añadir una sombra a cualquier contenedor utilizando sólamente CSS (sin imágenes). Éstos se consigue con dos div's desplazados, de manera que el de abajo exponga la sombra del de arriba. IE 6 tiene problemas mostrando elementos anidados, así que utilizaremos comentarios condicionales para ocultar el efecto en ese navegador. Código CSS


<!-- Esconde todo el codigo a IE6 -->
<![if !IE 6]>

<style type="text/css">

.shiftcontainer{
position: relative;
left: 5px; /*Number should match -left shadow depth below*/
top: 5px; /*Number should match -top shadow depth below*/
}

.shadowcontainer{
width: 300px; /* container width*/
background-color: #d1cfd0;
}

.shadowcontainer .innerdiv{
/* Add container height here if desired */
background-color: white;
border: 1px solid gray;
padding: 6px;
position: relative;
left: -5px; /*shadow depth*/
top: -5px; /*shadow depth*/
}

</style>

<![endif]>

Código HTML

<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<b>Título</b> <br />
Texto Texto Texto Texto <br />
Texto Texto Texto Texto <br />
Texto Texto Texto Texto <br />
Texto Texto Texto Texto 
</div>
</div>
</div>

Nota: Si aplicas la sombra a una imagen, deberás darle a ".shadowcontainer" el valor justo de la altura que tenga la imagen. Note: If you're applying the shadow to an image, like in the second example below, you should give ".shadowcontainer" an explicit height reflecting that of the image's.

Redactado por Dynamic Drive. Traducción y adaptación por eMe
http://www.dynamicdrive.com/style/csslibrary/item/css-drop-shadows/