A propriedade text-shadow está por ai a algum tempo já e é usada para recriar efeitos de Drop Shadow comuns do photoshop, adicionando sombras, e ajudando a criar profundidade, dimensão e sobresair os elementos da página. Esses efeitos comuns não são todas as propriedades que a propriedade Text-Shadow é capaz, sendo criativo e brincando um pouco com as cores, offset e blur nós podemos criar alguns efeitos bem bonitos e interessantes.
Saquem só esses seis efeitos de vintage/retro, inset, anaglyphic, fogo e board game nesse demo, então copie os códigos abaixo para criar esses efeitos em seus projetos. É necessário citar que você precisa de um browser moderno (Safari, Chrome, Firefox) para ver os efeitos em sua total gloria.
Como o Text-Shadow funciona
A propriedade text-shadow do CSS é usada para adicionar sombras a qualquer elemento do HTML. A sintase inclui valores para X-offset, Y-offset, quantidade de blur e finalmente a cor da sombra. Mas, você não precisa necessáriamente criar apenas uma sombra, você pode criar multiplas sombras adicionando mais valores e criar alguns efeitos realmente interessantes.
Efeito de texto Vintage / Retro
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Como funciona:
O efeito de texto vintage é feito de duas sombras, a primeira sombra é feita da mesma cor que o background, de maneira que faça parecer que a segunda sombra (a sombra fina preta) está mais abaixo do que realmente está. Lembre-se de escolher a cor correta do seu background para a primeira sombra, e use a mesma cor do texto para a segunda sombra.
Efeito de texto Neon
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
Como funciona:
O efeito de texto neon é feito de 8 níveis de sombra. O texto é preenchido com a cor branca, e então é dado um valor maior e maior de blur para cada uma delas e ao mesmo tempo a cor vai ficando mais escura em cada uma delas. isso faz a sombra bem brilhante proxima do texto e cada vez mais escura a medida que se afasta.
Efeito de texto Inset
text-shadow: 0px 2px 3px #666;
Como funciona:
O efeito inset no texto é um dos mais comuns feitos com text-shadow. A sombra é projetada com um valor bem pequeno no Y-axis para dar a impressão de profundidade. Em background escuros sombra deve ser feita com uma cor mais clara, em background claros a sombra deve ser feita no topo do texto com uma sombra de cor escura.
Efeito de texto Anaglyphic
text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
Como funciona:
O efeito de texto anaglyphic recria um ótimo efeito de imagens 3D antigas. O efeito é recriado usando uma combinação de text-shadow e coloração RGBa. Usando RGBa no texto e nas sombras com valor alpha de 50% de transparência para que as sombras sejam vistas através do texto.
Efeito de fogo no texto
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
Como funciona:
O efeito de fogo no texto é outro efeito que utiliza vários níveis de sombra. Cada sombra tem um offset diferente e em diferente direções, ele utiliza varias configurações de blur combinadas com uma serie de cores dando a impressão da chama. Essas cores variam de brancos para amarelos passando por laranjas e tons ambar.
Efeito de texto Board Game
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
Como funciona:
O efeito de texto board game é mais simpls, ele utiliza as sombras com valores cada vez maiores de offset, e utiliza cores alternadas. Não é utilizado blur para que as sombras se mantenham com contornos bem definidos e sejam reproduções do texto original.
Esse post é uma tradução livre, você pode ver o oringinal clicando aqui ou veja a tradução no post original clicando aqui
Legal!
legal