Carregando...

Efeitos de texto em CSS

Você já sabe alinhar, decorar e carregar fontes. Os efeitos de texto acrescentam um acabamento — sombra suave, reticências quando o espaço aperta, ou quebra para strings longas. Mantenha-os leves para o texto continuar legível.

Um pequeno kit de efeitos

📊 Efeitos de texto em um olhar

Ferramenta Trabalho do dia a dia
text-shadow Profundidade ou brilho suave atrás dos glifos (offset, blur, cor)
text-overflow Como termina o texto cortado — muitas vezes ellipsis (…)
overflow + white-space Parceiros que o ellipsis precisa (hidden + nowrap)
overflow-wrap Quebra palavras/URLs longas para caberem na caixa
writing-mode Faz o texto correr em outra direção (ex. vertical)

Efeitos são tempero, não o prato. Um título pode gostar de uma sombra calma; um parágrafo longo raramente precisa de fogos de artifício.

text-shadow — offset, blur, cor

A ordem costuma ser offset horizontal, vertical, raio de blur e depois cor. Valores pequenos ficam calmos; blur enorme embaca as letras.

text-shadow básico

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Sombras em camadas

Você pode listar mais de uma sombra separada por vírgulas — útil para um levantamento suave sem contorno duro.

Duas camadas suaves

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

Reticências quando o texto é largo demais

text-overflow: ellipsis só funciona com um recorte: tipicamente overflow: hidden e white-space: nowrap numa caixa de largura limitada.

Ellipsis em rótulo estreito

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — domar palavras longas

Uma URL longa ou string sem espaços pode estourar uma coluna estreita. overflow-wrap: break-word (alias antigo word-wrap) deixa o navegador quebrar dentro da palavra quando preciso.

Quebrar strings longas

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — um olhar vertical

writing-mode muda como as linhas avançam. Valores verticais servem para rótulos laterais ou títulos decorativos — não para parágrafos do dia a dia.

Olhar de texto vertical

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

Um hábito calmo para títulos

Uma sombra suave num título curto costuma bastar. Evite brilho pesado no corpo e use ellipsis só onde o espaço é realmente limitado.

Polimento leve do título

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

Experimente você

  1. Adicione um text-shadow suave a um título (offsets pequenos, blur modesto).
  2. Empilhe uma segunda sombra mais clara com vírgula.
  3. Monte um rótulo ellipsis: max-width, overflow: hidden, nowrap, ellipsis.
  4. Coloque uma URL longa numa caixa estreita com overflow-wrap: break-word.
  5. Teste writing-mode: vertical-rl num rótulo lateral curto — depois volte à leitura normal.

Erros comuns

  • Multisombras neon em parágrafos longos (difíceis de ler)
  • Definir text-overflow: ellipsis sem overflow: hidden e nowrap
  • Quebrar cada palavra com word-break agressivo quando overflow-wrap basta
  • Usar writing-mode vertical em artigos inteiros
  • Misturar esta lição com @font-face / carregamento de fontes web (a anterior)

Resumo

  • text-shadow usa offset, blur e cor — mantenha valores modestos
  • Várias sombras podem empilhar para um levantamento suave
  • Ellipsis precisa de overflow, nowrap e limite de largura
  • overflow-wrap ajuda palavras e URLs longas
  • writing-mode é ferramenta especializada; o corpo diário fica horizontal

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 29 de 35
Css Tutorial