Criar efeito de Photoshop com CSS - 27 Outubro 2013 - Blog - uCoz Developers
Início » 2013 » Outubro » 27 » Criar efeito de Photoshop com CSS
Criar efeito de Photoshop com CSS
A propriedade text-shadow está por ai a algum tempo já e é usada para recriar efeitos de Drop Shadowcomuns 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
Sintaxe do CSS:
text-shadow: x-shadow y-shadow blur color;
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
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.
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
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
O efeito é como o Inset mostrado acima, porem com RGBa, que tem a transparencia de 0.5, ou seja, 50%.
Efeito de fogo no texto
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
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.
Categoria: Web Design | Visualizações: 544 | Adicionado por : ShZlot | Tags: Css, text-shadow, efeitos | Ranking: 0.0/0