Sombra em textos usando CSS / Propriedade text-shadow.
Olá amores! Hoje vamos falar sobre text-shadow.
É com a propriedade text-shadow que podemos adicionar sombra a um texto utilizando CSS3. Sua sintaxe é bem simples. No exemplo, vamos adicionar uma sombra preta a um elemento <h1> cinza claro:
text-shadow:2px 3px 2px #000;
No exemplo, #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (2px) é o raio da sombra (efeito blur).
Podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels.
text-shadow:0.2em 0.3em 0.2em #000;
Sombras com distâncias e raio pequenos têm um efeito de relevo bem interessante:
text-shadow:1px 1px 1px #000;
text-shadow:1px 2px 2px #999;
Múltiplas sombras e valores negativos
É possível aplicar mais de uma sombra a um mesmo texto. As sombras se sobrepõem de acordo com a ordem da declaração, mas nunca vão se sobrepor ao texto original. Repare que na segunda declaração os valores dos deslocamentos horizontal e vertical são negativos, o que faz a sombra ser projetada na direção contrária (à esquerda e acima do elemento):
text-shadow: #000 1px 1px 1px, #888 -1px -1px 1px;
text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
Por hoje é só. Veja mais exemplos online. Se gostar de algum e quiser que eu ensine como fazer pode pedir na ask. Beijo! /Gabi
Veja exemplos distintos online. (Recomendo)
