Ao projetar um site, verifique se a aparência geral do site é esteticamente agradável para melhorar a experiência do usuário. Para esse fim, você pode adicionar imagens ou texto em seu site; no entanto, adicionar texto simples pode ter um impacto negativo na experiência do usuário, portanto, para aprimorar a beleza do texto simples, você pode adicionar um efeito de sombra usando o CSS Propriedade da sombra de texto.

Projetamos este tutorial para fazer você aprender como você pode tornar seu texto simples interessante de maneiras diferentes adicionando sombras de texto.

Vamos começar.

CSS Texto Shadow

Você pode adicionar uma sombra no texto que aparece nas páginas da web usando a propriedade CSS Text-Shadow. Aqui vamos demonstrar diferentes maneiras que você pode usar para adicionar sombra ao seu texto.

Adicionar sombra horizontal e vertical

Para adicionar uma sombra em um texto horizontal e verticalmente, apenas dê valores de ambas as dimensões da propriedade da sombra de texto. Siga o exemplo abaixo.

Html

Olá Mundo

Aqui nós criamos um

elemento e adicionou algum texto nele.

CSS

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

Usando a propriedade de sombra de texto, estamos dando 2px às dimensões horizontal e vertical do texto. Além disso, estamos fornecendo cor azul ao texto também.

Saída

Uma sombra horizontal e vertical foi adicionada ao texto.

Adicionando cor à sombra

Outra coisa divertida que você pode fazer é adicionar cores junto com a sombra ao texto. Use o seguinte snippet de código.

CSS

H1
Shadow de texto: 2px 2px azul;

Além de dar algum valor a dimensões horizontais e verticais do texto, também estamos fornecendo cor da sombra. Esta cor não é aplicada à sombra, não o texto.

Saída

A sombra recebeu a cor azul.

Adicione um efeito desfoque à sombra

Com o objetivo de adicionar um efeito desfoque à sombra, você deve especificar a intensidade do desfoque como o terceiro valor para a propriedade da sombra de texto. Siga o código abaixo.

CSS

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

No código acima, dois valores da propriedade-sombra de texto representam o comprimento da sombra horizontal e vertical e o terceiro valor representa a intensidade do borrão. Também fornecemos à sombra uma cor rosa profunda.

Saída

O efeito desfoque foi adicionado com sucesso.

Adicione um efeito de brilho à sombra

Para adicionar um efeito de brilho logo atrás do texto, siga o exemplo abaixo.

CSS

H1
Shadow de texto: 0 0 5px vermelho;

No trecho de código acima, para adicionar um efeito brilhante, estamos atribuindo 0px às dimensões horizontal e vertical do texto, além disso, dando algum valor ao raio do desfoque junto com a cor vermelha.

Saída

Um efeito brilhante foi adicionado ao texto.

Adicionando várias sombras

Para adicionar inúmeras sombras no texto, você pode adicionar uma lista de sombras na propriedade de text-shadow separada por vírgulas.

CSS

H1
Shadow de texto: 3px 3px 4px amarelo, 4px 4px 6px roxo;

No exemplo acima, estamos adicionando um efeito de sombra amarelo e roxo ao texto.

Saída

Múltiplas sombras foram adicionadas com sucesso.

Adicionando um esboço ao texto

Para adicionar um esboço ao texto usando a propriedade de shadow text, siga o exemplo abaixo:

CSS

H1
Cor: Bisque;
Shadow de texto: 1px 1px preto, -1px -1px preto;

No exemplo acima, atribuímos uma sombra de cor preta com 1px de dimensões direita e para baixo e dimensões superior e esquerda de -1px.

Saída

Um esboço foi adicionado ao texto.

Conclusão

Para tornar o seu texto simples interessante, você pode adicionar um efeito de sombra usando a propriedade de shadow text-shadow. Para esse fim, você deve especificar o comprimento da horizontal, bem como a dimensão vertical da sombra na propriedade da sombra de texto. Além de adicionar uma sombra, você também pode adicionar cor, um efeito de desfoque ou um efeito de brilho ao texto. Também é possível adicionar várias sombras ao mesmo texto usando a propriedade de shadow text. Neste guia, resumimos várias maneiras de adicionar um efeito de sombra ao texto.