Boteco Digital

CSS3 – text-shadow

O CSS3 está vindo ai certo, alguns browser já estão implementando algumas coisas legais que irão nos livrar de muitos “POGs” que somos obrigados a fazer e poupar bastante trabalho.

Hoje gostaria de apresentar a propriedade text-shadow que é simplesmente a sombra do texto, e já esta disponível para a maior parte dos navegadores.

seletor{
	text-shadow: medida1 medida2 medida3 cor;
}

Onde:

Medida 1: é o deslocamento a direita(com valores negativos a sobra irá para esquerda).

Medida 2: é o deslocamento para baixo(com valores negativos a sombra irá para cima).

Medida 3: é o raio para o efeito de blur na sombra.

Cor: é a cor da sombra.

Para ficar mais claro veja o exemplo das propriedade text-shadow.

Se você não está utilizando um navegador com suporte a propriedade veja abaixo como deve ser mostrado.

Um recurso que também é interesssante é a possibilidade de colocar várias sombras em um texto apenas adicionando mais valores separados por virgula.

seletor{
	text-shadow: 10px -10px #CCC, 20px -20px #F00, 30px -30px #00F; 
}

Deve ser visualizada assim:

[Baseado no artigo do Maujor]

Categorias CSS Web
comments powered by Disqus