Voltar para o site

Efeitos em textos com CSS

Publicado em: 28/08/2005

Desatualizado. Ver uma versão atualizada deste tutorial

Objetivo

Neste tutorial mostro algumas técnicas CSS para aplicar efeitos em textos. São efeitos de sombras simulando 3D e textos com linhas de contorno, obtidos com uso de marcação e de folhas de estilo. A obtenção destes efeitos visa a demonstrar mais uma das poderosas possibilidades das CSS. Trata-se na verdade de apresentar na tela um efeito que é impossível de se conseguir com simples (X)HTML, sem uso de imagens.

A aplicação dos efeitos

Para que você possa acompanhar os passos deste tutorial e facilitar o entendimento da breve explicação teórica sobre a aplicação de estilos nos textos, apresento screenshot para cada um dos efeitos que iremos obter.
Notar que estes efeitos servem apenas de base para nosso tutorial, pois se você entender a técnica da construção conseguirá muitos outros efeitos bem mais interessantes do que os mostrados aqui.

Fundamento teórico geral

Usei os seguintes elementos XHTML para a marcação e estilização dos efeitos, neste tutorial:

  • uma DIV conteúdo geral para o efeito, a qual atribui a classe .tudo
  • uma DIV para o texto em primeiro plano, a qual atribui a classe .texto
  • uma DIV para o primeiro efeito atrás do texto, a qual atribui a classe .efeito1
  • uma DIV para o segundo efeito atrás do texto, a qual atribui a classe .efeito2
  • uma DIV para o terceiro efeito atrás do texto, a qual atribui a classe .efeito3
  • uma DIV para o quarto efeito atrás do texto, a qual atribui a classe .efeito4

Efeito 1

Aplicação de uma sombra simples

Um texo com sombra simples

Contém:

  • div.tudo - fundo preto;
  • div.texto - texto vermelho;
  • div.efeito1 - sombra branca.

Fundamento teórico

Usar a regra de estilo position:absolute para locar div.sombra1 2px à direita e 2px acima da div.texto

Você dispõe de duas maneiras para fazer com que a div.texto fique na frente da div.efeito1:

  1. Escrever no código de marcação a div.texto DEPOIS da div.efeito1;
  2. Atribuir z-index para div.texto MAIOR que o z-index para a div.efeito1 sem se preocupar com a ordem na marcação.

O efeito

Veja neste link uma página com este efeito
Sugestão: veja o código fonte da página para estudar as regras de estilo para este efeito.

Efeito 2

Aplicação de uma sombra dupla

Um texto com sombra dupla

Contém:

  • div.tudo - fundo preto;
  • div.texto - texto branco;
  • div.efeito1 - sombra azul;
  • div.efeito2 - sombra branca.

Fundamento teórico

Usar a regra de estilo position:absolute para locar div.sombra1 2px à direita e 2px acima da div.texto;
Usar a mesma regra para locar div.sombra2 3px à direita e 3px acima da div.texto.

Assim como já vimos no efeito 1, você dispõe de duas maneiras para ordenar as três DIV:

  1. Escrever o código de marcação em determinada ordem;
  2. Atribuir z-index para cada DIV.

O efeito

Veja neste link uma página com este efeito
Sugestão: veja o código fonte da página para estudar as regras de estilo para este efeito.

Efeito 3

Aplicação de um contorno

Um texto com linha de contorno

Contém:

  • div.tudo - fundo cinza;
  • div.texto - texto vermelho;
  • div.efeito1 - sombra branca;
  • div.efeito2 - sombra branca;
  • div.efeito3 - sombra branca;
  • div.efeito4 - sombra branca.

Fundamento teórico

Observe que agora usamos 04 (quatro) DiVs da classe efeito; efeito1, efeito2, efeito3, efeito4.
cada uma das quatro DIVs será deslocada de 1px em relação à div.texto da seguinte maneira:

  • div.efeito1 - para cima e para a direita;
  • div.efeito2 - para baixo e para a esquerda;
  • div.efeito3 - para cima e para a esquerda;
  • div.efeito4 - para baixo e para a direita;

Assim conseguiremos um efeito de contorno branco com 1px de espessura no texto vermelho.

Veja nesta página os quatro efeitos aplicados separadamente.

O efeito

Veja neste link uma página com os quatro efeitos aplicados no mesmo texto, conseguindo-se o efeito de contorno proposto.
Sugestão: veja o código fonte da página para estudar as regras de estilo para este efeito.

Conclusão

Vimos neste breve tutorial, que com uso das propriedades de posicionamento das folhas de estilos é possível manipular textos de modo a obter efeitos que pela maneira ultrapassada de desenvolver sites só é possível com uso de imagens.
Volto a ressaltar que aqui mostrei o fundamento básico para obter os efeitos e que certamente com um pouco de imaginação você conseguirá reproduzir sombreamentos e efeitos muito mais criativos que estes mostrados.

Ler outro tutorial sobre efeitos em textos com CSS

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo