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»:

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

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

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

Resultado:

Sombra exterior con CSS

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.

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

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

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

Resultado:

Sombra interior con CSS

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

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre