Al diseñar un sitio web, asegúrese de que el aspecto general del sitio web sea estéticamente agradable para mejorar la experiencia del usuario. Para este propósito, puede agregar imágenes o texto en su sitio web, sin embargo, agregar texto sin formato solo puede tener un impacto negativo en la experiencia del usuario, por lo tanto, para mejorar la belleza del texto sin formato, puede agregarle un efecto de sombra utilizando el CSS. Propiedad de Shadow de texto.

Hemos diseñado este tutorial para hacerle aprender cómo puede hacer que su texto sin formato sea interesante de diferentes maneras agregando sombras de texto.

Vamos a empezar.

Sombra de texto de CSS

Puede agregar una sombra en el texto que aparece en las páginas web utilizando la propiedad CSS Text-Shadow. Aquí vamos a demostrar diferentes formas que puede usar para agregar Shadow a su texto.

Agregar sombra horizontal y vertical

Para agregar una sombra en un texto horizontal y verticalmente, simplemente proporcione valores de ambas dimensiones de la propiedad de Shadow de texto. Sigue el ejemplo a continuación.

Html

Hola Mundo

Aquí hemos creado un

elemento y agregó algún texto en él.

CSS

H1
Shadow de texto: 2px 2px;
color azul;

Usando la propiedad de Shadow de texto estamos dando 2px a las dimensiones horizontales y verticales del texto. Además, también estamos proporcionando color azul al texto.

Producción

Se ha agregado una sombra horizontal y vertical al texto.

Agregar color a la sombra

Otra cosa divertida que puedes hacer es agregar color junto con la sombra al texto. Use el siguiente fragmento de código.

CSS

H1
Shadow de texto: 2px 2px azul;

Además de dar algún valor a las dimensiones horizontales y verticales del texto, también estamos proporcionando color de la sombra. Este color no se aplica a la sombra, no al texto.

Producción

La sombra ha recibido el color azul.

Agregue un efecto desenfoque a la sombra

Con el fin de agregar un efecto desenfoque a la sombra, debe especificar la intensidad de desenfoque como el tercer valor a la propiedad de la sombra de texto. Sigue el código a continuación.

CSS

H1
Shadow de texto: 2px 2px 6px RGB (255,20,147);

En el código anterior, dos valores de la propiedad de Shadow de texto representan la longitud de la sombra horizontal y vertical y el tercer valor representa la intensidad del desenfoque. También hemos proporcionado a la sombra un color rosa profundo.

Producción

El efecto desenfoque se ha agregado con éxito.

Agregue un efecto brillo a la sombra

Para agregar un efecto brillo justo detrás del texto, siga el ejemplo a continuación.

CSS

H1
Shadow de texto: 0 0 5px rojo;

En el fragmento de código anterior, para agregar un efecto brillante, estamos asignando 0px a las dimensiones horizontales y verticales del texto, además, dando algún valor al radio de desenfoque junto con el color rojo.

Producción

Se agregó un efecto brillante al texto.

Agregar múltiples sombras

Para agregar numerosas sombras en el texto, puede agregar una lista de sombras en la propiedad de sombra de texto separada por comas.

CSS

H1
Shadow de texto: 3px 3px 4px amarillo, 4px 4px 6px púrpura;

En el ejemplo anterior, estamos agregando un efecto de sombra amarilla y morada al texto.

Producción

Se han agregado múltiples sombras con éxito.

Agregar un esquema al texto

Para agregar un esquema al texto utilizando la propiedad de Shadow de texto, siga el ejemplo a continuación:

CSS

H1
Color: Bisque;
Shadow de texto: 1px 1px negro, -1px -1px negro;

En el ejemplo anterior, hemos asignado una sombra de color negra con dimensiones de 1 px a la derecha y hacia abajo y dimensiones de top e izquierda -1px -1px.

Producción

Se ha agregado un esquema al texto.

Conclusión

Para que su texto sin formato sea interesante, puede agregarle un efecto de sombra utilizando la propiedad de la sombra de texto. Para este propósito, debe especificar la longitud de la dimensión horizontal y vertical de la sombra en la propiedad de Shadow de texto. Además de agregar una sombra, también puede agregar color, un efecto desenfoque o un efecto brillo para el texto. También es posible agregar múltiples sombras al mismo texto utilizando la propiedad de Shadow de texto. En esta guía, hemos resumido varias formas en que puede agregar un efecto de sombra al texto.