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

Select Code
<div class="box">

<img src="cssblog.png" alt="cssblog" />

</div>

Código CSS

Select Code
.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

Ver ejemplo de la sombra con perspectiva

Vía | Tuts

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!