Usando sombras en CSS con los atributos text-shadow y box-shadow

Usando sombras en CSS con los atributos text-shadow y box-shadow

La propiedad de CSS sombra utilizada para el texto como text-shadow y para elementos como box-shadow añade efectos de sombra alrededor del texto o elemento al cual se le aplica. Se pueden definir múltiples sombras separadas por comas.

Suscribete a mi canal



Text-Shadow

La propiedad text-shadow nos permite agregar sombra a los textos. Cada sombra tiene un offset en X y Y tambien un difuminado y un color. Podemos utilizar la cantidad de sombras que sean necesarias, separadas por una coma.

Estructura de la propiedad text-shadow

Con los atributos offSet podemos mover la sombra al lugar que queramos, con blur podemos difuminar la sombra y con el color sea rgb, rgba, hexadecimal o por nombre podemos asignarle un color a la sombra.

Podemos utilizar la cantidad de sombra que queramos mientras separemos con coma cada sombra.


Box-Shadow

La propiedad box-shadow crea un efecto de sombra al marco de un elemento. Se pueden definir múltiples efectos separados por comas.

Estructura de la propiedad box-shadow

Con los atributos offSet podemos mover la sombra al lugar que queramos, con blur podemos difuminar la sombra y con el color sea rgb, rgba, hexadecimal o por nombre podemos asignarle un color a la sombra.

Podemos utilizar la cantidad de sombra que queramos mientras separemos con coma cada sombra.

Y asi de facil y sencillo es utilizar las propiedades text-shadow y box-shadow.


Repositorio de la serie: https://gitlab.com/edisonjsapps/css-avanzado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *