Daniel Leal Freitas Postado 13 de novembro de 2010 Denunciar Compartilhar Postado 13 de novembro de 2010 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. Veja a demo 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. Veja a demo. 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. Veja a demo 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. Veja a demo. 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. Veja a demo 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. Veja a demo 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. Veja a demo Esse artigo foi traduzido por Daniel Leal Freitas veja o post original[/url Esse post é uma tradução livre, você pode ver o original em inglêsclicando aqui Citar Link para o comentário Compartilhar em outros sites More sharing options...
ayrescody Postado 13 de novembro de 2010 Denunciar Compartilhar Postado 13 de novembro de 2010 Show ! Citar Link para o comentário Compartilhar em outros sites More sharing options...
Sichieri Postado 15 de novembro de 2010 Denunciar Compartilhar Postado 15 de novembro de 2010 Po cara bem util, curti, vlw xD Citar Link para o comentário Compartilhar em outros sites More sharing options...
Posts Recomendados
Participe do debate
Você pode postar agora e se registrar depois. Se você tem uma conta, entre agora para postar com ela.