Sombra em texto com CSS – text-shadow

A propriedade text-shadow do CSS permite adicionar uma sombra no texto descartando o uso de imagens. A maioria dos navegadores já possuem suporte para essa propriedade, entre eles estão: Safari, Opera, Chorme e Firefox.

Abaixo um exemplo de sombra com uso de CSS.

Exemplo text-shadow

Se o seu navegador não tem suporte para essa propriedade segue a imagem de referência.

Para produzir esse efeito foi utilizada a seguinte regra de estilo.

text-shadow:3px 4px 2px #aaa;

Como você pode ver text-shadow aceita quatro valores:

1. 3px: Cordenada X (horizontal) da sombra em relação ao texto;
2. 4px: Cordenada Y (vertical) da sombra em relação ao texto;
3. 2px: O raio de desfocagem da sombra, isso significa que quanto maior o valor mais a sombra é “esticada”, causando um efeito de borrão;
4. #aaa: Cor da sombra. A cor pode ser especificado no inicio ou após o valor de desfoque.

Podemos trabalhar com múltiplas sombras, bastando apenas separar os valores da propriedade text-shadow por uma virgula. Segue abaixo dois exemplos de utilização de múltiplas sombras.

Exemplo 1

Exemplo text-shadow

Imagem de referência

Exemplo 2

Exemplo text-shadow

Imagem de referência

Uma outra forma de fazer sombras utilizando CSS é com o uso de propriedades de posicionamento position:.A técnica consiste em trabalhar com as propriedades top e left, por exemplo, para deslocar o texto da sombra.

Espero que tenham gostado.
Abraços e boa semana a todos!