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

Usando sombras en CSS con los atributos text-shadow y box-shadow Fecha de creación: 15 - 09 - 2020
Serie - CSS Avanzado

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


Compartir:  

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.

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.


Recursos

Compartir:  


Suscribete a mi canal