Se você deseja causar um impacto visual em seus projetos da web, os efeitos de texto 3D são uma maneira infalível de fazê-lo. Eles podem transformar o título de um site comum em uma obra de arte imperdível.
O bom é que uma grande variedade de efeitos 3D pode ser criada usando CSS e JavaScript. Quando implementado cuidadosamente, permite que o texto permaneça acessível e responsivo. Está muito longe dos dias em que esses efeitos só estavam disponíveis por meio do uso de imagens.
Hoje, vamos dar uma olhada em alguns trechos que apresentam belos efeitos de texto 3D. Eles variam de calmos e elegantes a escandalosamente animados. Há algo aqui para quase todas as necessidades.
Cartas em uma prateleira
Aqui está um exemplo divertido que mostra o poder da biblioteca Three.js . O texto 3D aparece em uma série de prateleiras – mas há mais do que aparenta. Clique ou toque em uma letra e ela cairá para sua destruição iminente.
Sinalização matricial
Este trecho de texto simula a aparência de um sinal de matriz de pontos e ainda permite que você insira seu próprio texto personalizado. Conforme o sinal gira horizontalmente, observe as mudanças sutis no matiz. Ele imita muito bem o tipo de efeito de sombreamento que você veria no mundo real. Mover o cursor para cima e para baixo também inclina o ângulo de visão.
Heróis de quadrinhos
O uso de uma fonte de desenho animado e uma animação CSS fazem com que este exemplo se destaque. Em vez disso, cada palavra “salta” na sua direção em intervalos alternados. Contornos de texto e sombreamento ajudam a trazer à tona essa terceira dimensão.
Palavras Onduladas
Surpreendentemente, esse efeito de onda 3D é feito com CSS puro (e pouco mais de 50 linhas, para inicializar). Uma aparência única em camadas é combinada com um modo de mesclagem para adicionar um toque de misticismo. A animação suave significa que você pode chamar a atenção para o texto sem sobrecarregar os usuários.
Nas sombras
Talvez pareça simplista, mas as sombras CSS oferecem uma maneira eficaz de adicionar um efeito 3D. Aqui temos uma demonstração de duas maneiras diferentes de atingir três dimensões. Usar a filter propriedade CSS permite que parte do plano de fundo da página apareça, enquanto text-shadow fornece uma aparência mais tradicional.
Retrocedendo
Admitimos que este efeito particular pode não ser apropriado para a maioria dos projetos. Mas ainda é muito divertido. A vibração retro do videogame e o texto pulsante combinam com o PAC-MAN e os pontos. Pode até fazer você querer tirar aquele velho Commodore 64 do armazenamento.
The Strokes
3D não precisa significar indigno. Veja este texto traçado, por exemplo. Ele oferece muito impacto multidimensional, mas foi projetado para se misturar. Esse efeito mínimo pode ser ótimo para manchetes de artigos ou títulos de páginas.
Gravada na pedra
Quer ainda mais sutileza? Este efeito de gravação adiciona dimensão e um pouco de classe. O estilo foi elaborado com CSS, enquanto a data atual é gerada via JavaScript. Vai para 3D sem entrar na cara de ninguém.
Adicione efeitos de texto 3D com CSS e JavaScript
Esteja você procurando adicionar movimento e interatividade ou decoração sutil, os efeitos de texto 3D podem ajudar. Eles chamam a atenção para conteúdos importantes e permitem que você saia do mundano.
Além do mais, você não precisa necessariamente escrever uma grande quantidade de código para criar algo único. Alguns dos exemplos acima foram criados com um pouco de CSS relativamente pequeno. Você pode começar pequeno e progredir até algo maior, se necessário.