Sombra de Texto em CSS

João E. -

Sintaxe e Uso Básico

A propriedade CSS text-shadow permite adicionar sombras a elementos de texto. Ela aceita quatro valores: o deslocamento horizontal, o deslocamento vertical, o raio de desfoque e a cor.

A sintaxe básica para aplicar uma sombra de texto é:

Exemplo: Sintaxe Básica

selector {
  text-shadow: deslocamento-horizontal deslocamento-vertical raio-de-desfoque cor;
}

Eis o significado de cada valor:

  1. deslocamento-horizontal: A distância, em pixels, que a sombra deve ser deslocada horizontalmente do texto. Um valor positivo move a sombra para a direita, enquanto um valor negativo a move para a esquerda.

  2. deslocamento-vertical: A distância, em pixels, que a sombra deve ser deslocada verticalmente do texto. Um valor positivo move a sombra para baixo, enquanto um valor negativo a move para cima.

  3. raio-de-desfoque: A quantidade de desfoque aplicada à sombra. Um valor maior criará uma sombra mais suave, enquanto um valor menor resultará em uma sombra mais nítida. Definir isso como 0 dará à sombra uma borda dura.

  4. cor: A cor da sombra. Pode ser qualquer valor de cor CSS válido, como código hexadecimal, RGB, RGBA, HSL ou nome de cor.

Exemplo: Usando text-shadow

h1 {
  text-shadow: 2px 2px 4px #000000;
}

Neste exemplo, o elemento <h1> terá uma sombra deslocada 2 pixels para a direita e 2 pixels para baixo, com um raio de desfoque de 4 pixels e cor preta.

Você também pode usar valores negativos para os deslocamentos horizontal e vertical:

Exemplo: Usando valores negativos

p {
  text-shadow: -1px -1px 2px #CCCCCC;
}

Isso cria sombras cinza claro semelhantes a um efeito interno, pois é deslocada um pixel para cima e para a esquerda.

Ajustando esses valores, você pode criar vários efeitos de sombra de texto para suas necessidades de design.

Técnicas Avançadas de Sombra de Texto

Sombras de Texto Múltiplas

Você pode aplicar várias sombras a um único elemento de texto separando cada sombra com uma vírgula. Isso permite criar efeitos de sombra mais complexos.

Exemplo: Usando sombras múltiplas

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Neste caso, o texto terá uma sombra vermelha com um desfoque de 3px e uma sombra azul com um desfoque de 5px. As sombras se sobreporão.

Alguns usos criativos de sombras múltiplas incluem:

  • Criar um efeito de brilho neon usando uma sombra mais escura sobre uma mais clara
  • Simular um efeito 3D deslocando sombras em direções opostas
  • Adicionar sombras internas e externas para mais estilo

Ao combinar várias sombras, é melhor:

  • Limitar o número de sombras para evitar sobrecarregar o texto
  • Usar cores semitransparentes para permitir uma melhor mistura
  • Ajustar os raios de desfoque para efeitos mais suaves ou nítidos conforme necessário

Sombra de Texto e Pseudoelementos

Você pode aplicar sombras de texto a pseudoelementos (::before e ::after) para criar efeitos interessantes sem adicionar elementos HTML extras.

Exemplo: Adicionando um efeito de 'eco' com pseudoelementos

h1::after {
  content: attr(data-text);
  position: absolute;
  text-shadow: 2px 2px 4px #000;
  top: 0;
  left: 0;
  z-index: -1;
}

Aqui, o pseudoelemento ::after duplica o conteúdo do texto (usando a função attr()), posiciona-o atrás do texto original e aplica uma sombra.

Você também pode combinar sombras de texto com outras propriedades CSS em pseudoelementos como transform, opacity ou filter para efeitos mais avançados.

Sombra de Texto e Animações CSS

Usando animações CSS, você pode tornar as sombras de texto dinâmicas. Você pode animar propriedades como deslocamento, desfoque e cor.

Exemplo: Animando sombra ao passar o mouse

h1 {
  transition: text-shadow .3s;
}

h1:hover {
  box-shadow: .5em .5em .8em rgba(255, .25, .25, .75);
}

Neste caso, o cabeçalho receberá um brilho vermelho suave quando o mouse passar por cima, dentro de 0,3 segundos. Você também pode usar keyframes para animações complexas:

Exemplo: Usando keyframes para animações complexas

@keyframes pulse {
  from {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
  via {
    box-shadow: .35em -.35em .55em rgba(255, .25, .25, .75);
  }
  until {
    box-shadow: .15em -.15em .35em rgba(255, .25, .25, .75);
  }
}

header {
  animation: pulse infinite ease-in-out;
}

Isso faz com que o cabeçalho pulse entre diferentes tons indefinidamente. Ao animar cabeçalhos:

  • Use transições para efeitos simples ao passar o mouse e keyframes para efeitos complexos.
  • Tenha cuidado com o desempenho, pois os desfoques consomem muitos recursos.
  • Garanta que a animação melhore a experiência do usuário em vez de distrair do conteúdo.