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 é interessante é 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(http://imasters.com.br/artigo/7469/css/css3_sombras_em_textos/)