Desenvolvimento - CSS
Efeitos CSS em textos
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.
por Maurício Samy SilvaObjetivo
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
Efeito1
Aplicação de uma 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:
- Escrever no código de marcação a div.texto DEPOIS da div.efeito1;
- 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
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:
- Escrever o código de marcação em determinada ordem;
- 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
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.
Mais efeitos em textos? Siga este link
