Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo