15 belos efeitos de texto criados com CSS

Belo texto ou tipografia fará seu design parecer atraente. Em web design, CSS ajuda a dar estilo ao design, incluindo vários efeitos em texto ou tipografia. Com CSS, você pode usar recorte e adicionar animação ao texto para apimentar um pouco as coisas.

E para ilustrar isso, nós coletamos 15 efeitos de texto impressionantes e legais que são possíveis com CSS (alguns com uma pequena ajuda de códigos Javascript).

Para mais coisas que você pode fazer com CSS, confira:

• 18 coisas legais que você não vai acreditar foram construídas usando CSS
• 30 bibliotecas de efeitos de texto jQuery que você precisa conhecer
• Como criar forma de coração com CSS
• Animate.css - biblioteca CSS3 para criar animação facilmente

Animação de traço elástico

Yoksel anima o traço do texto com um esquema de cores legal. Este efeito é feito com CSS e SVG. O resultado é incrível!

Falha do SVG

Quer fazer efeitos que parecem uma TV analógica quebrada? Dirk Weber fez esse incrível efeito de falha usando o filtro CSS e SVG.

Logotipo da loja Talk

O logotipo do Shop Talk é recriado por Hugo usando apenas CSS. O logotipo é semelhante ao original, completo com a textura certa.

Efeito Cortado

Essa ideia de Robet Messerle dá o efeito faca fatiada, feito com menos de 70 linhas de CSS.

Efeito de sombra elegante

Long Shadow efeito vem ao texto, feito usando CSS. O criador, Juan Brujo fez 4 outros efeitos, mas este é facilmente o mais impressionante.

Efeito de texto nebuloso

Andreas cria um incrível efeito nebuloso cinematográfico. Aplicável apenas em navegadores Webkit.

Máscara de texto SVG

Um design de Marco Barria mostra um elegante efeito de mascaramento de texto em uma grande imagem de fundo.

Animação de Texto

Yoann criou um ótimo efeito ticker com essa animação de texto. Veja como a segunda palavra alterna entre três palavras.

Bata no chão

Este efeito 3D do ThatGuySam é um jogo simples em sombras de texto, mas com um resultado incrível.

Texto do clipe de fundo

Jintos estava brincando com um clipe de fundo do Webkit para adicionar uma imagem de fundo dentro do texto. Ele fez 16 criações legais usando este método.

CSS Text-FX

Moklik adicionou efeito de luz ao texto, dando-lhe flashes intermitentes que avisam do perigo de longe.

Assinatura animada de assinatura

Gary Hepting criou uma animação de assinatura em tempo real. Isso funciona aplicando o Javascript no caminho do SVG para animar a assinatura.

Glitchy colorido 404

Você pode ouvir o som dessa falha e sentir a vibração dentro da sua cabeça? É assim que esse efeito de falha é bom. mistic100 feito com CSS mais um pouco de Javascript.

Cosmos

Agora este é um logotipo elegante e inspirador. Também é adequado para uso em “Cosmos”, porque orbita, entendeu?

Carregando

Um efeito de carregamento legal que é simplesmente a ocultação e exibição de letras.