Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

Usando CSS para criar efeitos avançados de texto

2 min read

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.

View the text-shadow effects

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

How the CSS text-shadow property works

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

Vintage text-shadow effect

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

Neon text-shadow effect

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

Inset text-shadow effect

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

Anaglyphic text-shadow effect

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

Fire text-shadow effect

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

Board Game text-shadow effect

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 post é uma tradução livre, você pode ver o oringinal clicando aqui ou veja a tradução no post original clicando aqui

Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

2 Replies to “Usando CSS para criar efeitos avançados de texto”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *