12

9

Box-shadow con CSS3

Actualmente CSS3 nos da muchas herramientas que nos ayudan al diseño, entre ellas se encuentra box-shadow que nos sirve para crear sombras de elementos de nuestra web fácilmente, y además podemos crear resplandores y efecto de profundidad gracias a ello.
Nota: la mayoría de los navegadores que respetan los estándares pueden visualizarlo.

En este ejemplo podemos ver como con 4 DIVs una dentro de la otra podemos crear el efecto de profundidad jugando con los colores del fondo y las sobras hechas con box-shadow.
En Xitrus también hay bastantes elementos que usan box-shadow como la parte inferior de la cabecera, el contenedor principal y la barra lateral.

Usar box-shadow

Este elemento de CSS3 tiene los siguientes parámetros:

• Desplazamiento lateral: es la distancia que hay desde el borde de el elemento hasta el fin de la sombra horizontalmente (eje X).
• Desplazamiento vertical: es la distancia que hay desde el borde de el elemento hasta el fin de la sombra verticalmente (eje Y).
• Desenfoque de la sombra: establece lo borrosa que sea la sombra.
• Color: le podemos dar color en cualquier notación (hexadecimal, rgba()...).

1. box-shadow: [Desp. eje X] [Desp. eje Y] [Desenfoque] [Color];

Sobra interior y exterior

Podemos establecer donde se encuentra la sombra, en el interior o en el exterior del elemento "inset" al principio del contenido de box-shadow.

1. box-shadow: 0px 0px 20px #000; /* Sombra exterior */
2. box-shadow: inset 0px 0px 20px #000, 0px 0px 20px #000; /* Sombra interior y exterior */
3. box-shadow: inset 0px 0px 20px #000; /* Sombra interior */

Crear resplandor

Un defecto de box-shadow es que al difuminar los colores claros se hacen demasiado transparentes, y para solventarlo es conveniente añadir varios resplandores juntos (ahora lo veréis en el ejemplo).

1. <div style="box-shadow: 0px 0px 30px #F09;"></div>
2. <div style="box-shadow: 0px 0px 30px #F09, 0px 0px 30px #F09;"></div>
3. <div style="box-shadow: 0px 0px 30px #F09, 0px 0px 30px #F09, 0px 0px 30px #F09;"></div>