Cómo aplicar sombras a un contenedor o div con CSS

En este artículo vas a descubrir como aplicar sombras a un contenedor, caja o div utilizando la nueva propiedad box-shadow de CSS3.

A las cajas o contenedores se les puede dar una sombra exterior o interior para darle un efecto flotante o pulsado.

Sombra exterior

Empezaré con la sombra exterior que, popularmente, es la más utilizada.

Es un tipo de sombra que hace qua las cajas o contenedores de tu sitio Web pareciera que estuvieran flotando o dándoles el sol desde un costado.

En el ejemplo en funcionamiento te he creado un <div> con una clases «sombra»:

Source code

<div class="sombra">Sombra Interior</div>

Para darle los siguientes estilos con el objetivo de aplicar una sombra exterior:

Source code

.sombra {
    box-shadow: 5px 5px 15px gray;
}

Resultado:

Lo que quiero darte a conocer en este artículo es la propiedad «box-shadow» que justamente permite añadir una sombra a tu div, caja o contenedor.

A la propiedad «box-shadow» le puedas dar 4 valores.

En orden tienen el siguiente significado:

• Eje X (valor en px)
• Eje Y (valor en px)
• Difuminado
• Color de la sombra

Sombra Interior

Las sombras interiores en una caja o contenedor se pueden aplicar de la misma forma pero agregando la propiedad «inset».

Este efecto suelo utilizarlo bien poco pero en alguna ocasión lo he utilizado para dar un efecto diferente a los botones que se han pulsado para darle el efecto de que han sido utilizados.

Source code

.sombra-interior {
    box-shadow: 5px 5px 15px gray inset;
}

Luego, en tu HTML puedes agregar tu <div> de la siguiente forma:

Source code

<div class="sombra-interior">Sombra Interior</div>

Resultado:

Si no te aclaras con los parámetros de la propiedad «box-shadow», tienes la posibilidad de usar herramientas tan interesantes como CSS3 Generator donde tienes la posibilidad de simular y generar el código (que podrás copiar) de la sombra que quieras entre muchas cosas más.

Ver demo Descargar