Sombras en CSS3

Las sombras en CSS3 nos permiten aplicar sombras tanto a textos como a contenedores sin necesidad de usar imagenes ni recurrir a scripts, hoy dia la mayoria de navegadores modernos son compatibles con CSS3 por lo que el uso de esta tecnica está mas que justificado sin tener que dar soporte a versiones antiguas.

text-shadow

La propiedad text-shadow nos permite añadir múltiples sombras de diversos colores y efectos a un texto. Esta propiedad nos permite establecer varios parametros, dos de ellos son obligatorios, el desplazamiento horizontal y el desplazamiento vertical, a partir de aqui podemos indicar de forma opcional un tercer parametro para definir el la nitidez de la sombra y un cuarto para el color.

Ejemplo

text-shadow: 1px 1px 2px #000000;

Resultado

Con el primer y el segundo parametro hemos indicado al codigo que el texto se desplazará 1px horizontal y verticalmente, el tercer parametro indica un nivel de nitidez de 2px, cuanto mayor sea este parametro, mas borrosa será la sombra, por ultimo el cuarto parametro indica el color negro.

Esta propiedad permite muchas posibilidades, podemos indicar medidas negativas y jugar con los bloques de codigo para conseguir efectos muy elegantes.

Ejemplo

text-shadow: 0px -1px 0px #424242;

SOMBRAS CSS3

text-shadow:
2px 2px 0px #555555,
4px 3px 0px #0099FF;

SOMBRAS CSS3

text-shadow: 0px 0px 8px #0099FF;

SOMBRAS CSS3

text-shadow:
-3px 3px 0px #0099FF,
-6px 6px 0px #2E64FE,
-9px 9px 0px #184583;

SOMBRAS CSS3

text-shadow:
0px 0px 4px #FFFF6C,
0px -6px 6px #FFEF00,
0px -10px 10px #F09A2A,
0px -14px 14px #FF2200;

SOMBRAS CSS3

box-shadow

Esta propiedad nos permite aplicar sombras en cualquier caja o bloque de nuestro código, al igual que text-shadow, esta propiedad nos permite establecer varios parametros, dos de ellos son obligatorios, el desplazamiento horizontal y el desplazamiento vertical, a partir de aqui podemos indicar de forma opcional un tercer parametro para definir el la nitidez de la sombra, un cuarto para el tamaño de la sombra respecto a su contenedor, un quinto para el color, y un sexto parametro con el que podemos indicar que la sombra sea interior (inset).

Ejemplo

Se pueden generar sombras en los elementos con efectos elegantes sin necesidad de codigo complejo.