CSS 3 – Parte 03 | Ponto Nulo

CSS 3 – Parte 03

Por: Rodrigo Leite em 24 de julho de 2009, categoria: Desenvolvimento

Nesta terceira parte abordaremos os efeitos de textos. Não sei se repararam, mas o texto está com sombra branca. Caso não esteja visualizando o efeito então o seu browser não dá suporte ao CSS 3 ou a função mostrada aqui.

Para utilizar este estilo é bem simples, basta usar a função text-shadow. Esta função não é nova, alguns browser já a utilizavão no CSS 2 e com o CSS 3 a compatibilidade foi espalhada pelos browsers mais novos.

text-shadow: 2px 2px 2px #FFF; (eixo x, eixo y, definição da sombra, cor)

Este exemplo acima é o que está sendo usado no primeiro parágrafo. O segundo parágrafo foi mudado apenas a cor. Não e só uma sombra que podemos mostrar, com um pouco de criatividade podemos fazer diversos estilos de sombras.

Abaixo alguns exemplos:

text-shadow: 5px 5px 1px blue;

text-shadow: 50px 5px 1px rgb(255, 255, 255);

text-shadow: 0px 20px 1px yellow;