pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

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.

text-shadow

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


text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px
1px #666, -1px -1px #fff

Imagem de referência
text-shadow-exemplo-dois

Exemplo 2

Exemplo text-shadow


text-shadow: 0 6px 4px #33F, -3px -5px 4px #f00, 3px
-5px 4px #0F0

Imagem de referência
text-shadow-exemplo-tres

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!

Categorias: CSS |

Topo