Início » 2013 » Outubro » 27 » Criar efeito de Photoshop com CSS
19:03:15
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/retroinsetanaglyphicfogo 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

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

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 é como o Inset mostrado acima, porem com RGBa, que tem a transparencia de 0.5, ou seja, 50%.


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.

Categoria: Web Design | Visualizações: 928 | Adicionado por : ShZlot | Tags: Css, text-shadow, efeitos | Ranking: 0.0/0
Total de comentários: 0
Somente usuários registrados podem adicionar comentários.
[ Registrar-se | Login ]