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

box-shadow: 3px 3px 1px #000000;

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

box-shadow: 0 15px 10px -10px #999999;

box-shadow: -5px -5px 0px #999999,-10px -10px 0px #CCCCCC;

box-shadow: 0px 0px 30px #CCCCCC;

box-shadow: 20px 0px 0px #999999 inset;

box-shadow: 0px 0px 30px #999999 inset;

box-shadow: 0px -30px 25px -10px #999999;

box-shadow: 0px -15px 0px -10px #999999, 0px 10px 0px #999999, 20px 0px 0px #0099FF inset, -30px 0px 0px #0099FF inset;

10px 0px 10px -4px #999999, -10px 0px 10px -4px #999999;

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies