En el mundo de diseño web se ha hecho muy popular añadir sombra a los objetos. Muchos me han preguntado si para añadir sombra hace falta algún tipo de algoritmo o código javascript. La realidad es que la respuesta es no, con solo unas lineas de CSS podemos crear un efecto de sombra muy elegante.
Para crear este efecto con CSS utilizamos la propiedad box-shadow. Esta propiedad nos deja configurar la sombra a nuestro gusto utilizando sus elementos para controlar cada aspecto de la sombra.
| Elemento | Descripción |
|---|---|
| Sombra horizontal | Representa la posición de la sombra horizontalmente. Es requerido. |
| Sombra vertical | Representa la posición de la sombra verticalmente. Es requerido. |
| Difuminación | Distancia de la difuminación. Es opcional. |
| Tamaño | El tamaño de la sombra. Es opcional |
| Color | El color de la sombra.
Aunque no es requerido es recomendable especificarlo ya que en algunos navegadores no sale la sombra si el color no está especificado. |
Muy bien. Si ponemos todo junto vamos a obtener algo así.
.sombra
{
box-shadow: 8px /* Sombra horizontal */
3px /* Sombra vertical */
14px /* Difuminación */
5px /* Tamaño */
#7A7A7A; /* Color */
}
¡Excelente! Ya tenemos la sombra para los elementos que contengan la clase sombra. Ahora resta asegurarnos que todos los navegadores interpreten la sombra correctamente. Para esto vamos a utilizar 2 propiedades similares: -webkit-box-shadow y -moz-box-shadow. Estas 2 propiedades se utilizan exactamente igual que box-shadow. Así que añadimos estas últimas 2 propiedades a nuestro código CSS.
.sombra
{
-webkit-box-shadow: 8px 3px 14px 5px #7A7A7A;
-moz-box-shadow: 8px 3px 14px 5px #7A7A7A;
box-shadow: 8px 3px 14px 5px #7A7A7A;
}
¡Listo! Ya tenemos sombra en nuestro diseño.
Para probar y jugar con la sombra vayan aquí:
