Ya hemos mencionado que pueden crearse con CSS 3, pero conozcamos otra solución:
HTML
<div class="caja">
<div class="sombra">
<div class="contenido">...</div>
</div>
</div>
CSS
.caja{
background: #ccc;
margin-left: 4px;
margin-top: 4px;
}
.sombra, .contenido{
position: relative;
bottom: 2px;
right: 2px;
}
.sombra{
background: #666;
color: inherit;
}
.contenido {
background: #fff;
border: 1px solid #000;
padding: 5px;
}
También podríamos jugar con imágenes de fondo...
Hoy en día se suele usar CSS3 para conseguir estos efectos. El código anterior nos sirve, entre otras cosas, para ver que a menudo hay diferentes maneras de conseguir lo que buscamos.