La propiedad box-shadow, una de las nuevas opciones de CSS3, se ha convertido en la opción ideal para crear sombras en las cajas. Aplicando sombras a la pseudo-clases ::before y ::after, crearemos útiles perspectivas con la sombra. Allá vamos:
Código HTML
<div class="box"> </div>
Código CSS
.box:after {
content: '';
position: absolute;
z-index: -1; /* Esconder la sombra detrás de la imagen */
/* La sombra */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* La mitad del 30% restante */
height: 100px;
bottom: 0;
}
Ejemplo de su funcionamiento
Vía | Tuts


