10 Trechos CSS para Criar Efeitos de Texto Sublinhado Animados Impressionantes

O sublinhado CSS padrão funciona muito bem. Quem poderia odiá-lo?

Mas sempre há espaço para melhorar as coisas. Você pode pensar que não há muito o que fazer com sublinhados, mas se você se aprofundar na animação CSS, perceberá o quanto você realmente pode fazer!

Eu classifiquei inúmeros estilos de sublinhado CSS e escolhi minhas principais opções para os melhores sublinhados personalizados na web. Se algum deles chamar sua atenção, sinta-se à vontade para entrar e tentar brincar com o código-fonte.

1. Sublinhado alternado

Se você mover o cursor entre esses links, notará algo meio engraçado. O efeito de sublinhado no menu de navegação realmente altera os estilos entre os links.

Não apenas isso, mas ele se move pela navegação dinamicamente para dar a ilusão de que é um bloco singular. Bem legal né?

Você pode fazer tudo isso sozinho com um pouco de CSS adicionando o bloco sublinhado em um elemento HTML. Surpreendentemente simples, considerando quão pouco código você precisa (cerca de 60 linhas de CSS).

2. Abrangendo várias linhas

Os estilos de quebra de linha CSS são complicados e não são fáceis de contornar. Mas com algum desenvolvedor engenhoso Will King construiu esta caneta criando um efeito de sublinhado dinâmico que pode abranger várias linhas sem nenhum bug.

Observe que isso depende de um pouco de JavaScript para manter a linha intacta. Mas também é dinâmico o suficiente para funcionar com qualquer link na página, então não importa como você formata o texto.

Além disso, tudo isso usa um gradiente CSS3 personalizado para o plano de fundo, o que é muito legal.

3. Sublinhado deslizante

O desenvolvedor Ryan Morse criou esse efeito de sublinhado deslizante muito simples, baseado apenas em CSS. É uma solução bastante elegante, considerando que nem requer um item HTML extra.

Você pode projetar seus menus de navegação como qualquer outro site e usar esse efeito CSS para criar animações deslizantes dinâmicas. Além disso, todos os resultados podem ser alterados no código CSS, que inclui atenuações e duração total.

4. Sublinhado de texto melhor

À primeira vista, você pode não notar nada de diferente com este sublinhado. Mas se você comparar com a demonstração “padrão” mais abaixo na página, verá que isso realmente parece muito melhor.

No melhor sublinhado de texto de Lukas Horak, você notará que a barra abaixo do texto se encaixa melhor nos elementos descendentes. Isso considera formas de letras como 'g' e 'p', onde as linhas caem abaixo da altura normal da linha.

Além disso, o próprio sublinhado é empurrado ligeiramente para baixo abaixo do texto, de modo que assume uma nova aparência em comparação com o padrão do navegador.

5. Estilos de Animação

Esta caneta exclusiva possui alguns efeitos de sublinhado personalizados criados com CSS puro pelo desenvolvedor Matthew Scott.

Possui quatro estilos de sublinhado muito específicos com base em algumas transições CSS comuns:

• Direita para esquerda
• Esquerda para a direita
• Animando para fora
• Animando para dentro

Você notará que isso funciona nas transições CSS3 comuns que funcionam tanto ao passar o mouse no link quanto ao mover o cursor para fora do link.

Definitivamente alguns efeitos legais e todos eles são muito fáceis de portar em seus próprios projetos.

6. Mais estilos de animação

Aqui está outro pacote de animações de sublinhado personalizadas, essas criadas por dev Kseso.

Estes são um pouco mais extremos com os estilos de sublinhado empurrando sombras CSS3 para efeitos brilhantes. Você provavelmente pode usar isso como um modelo para fazer um design de sabre de luz de Star Wars se tiver tempo (ou simplesmente adorar Star Wars).

7. Basta entrar

Eu vi esse efeito em alguns sites e provavelmente é um dos meus favoritos. O sublinhado suspenso usa CSS puro e anima a linha com um efeito de transição.

Com esta animação você ainda tem a sensação de que cada “borda” sublinhada se conecta a cada link. Eu gosto mais do que as linhas que deslizam entre os links porque esse efeito parece mais rápido e direto.

Se você deseja uma abordagem realmente minimalista para sublinhar efeitos, definitivamente deve tentar trabalhar com este código.

8. Animação em expansão

O estilo de sublinhado em expansão pode ser encontrado no pacote de sublinhado que mencionei anteriormente. Mas esse sublinhado específico é um pouco diferente porque usa o tempo de animação personalizado.

Observe que ele está usando a função cubic-bezier() para criar uma animação exclusiva ao passar o mouse.

Isso é executado um pouco mais rápido do que a transição “linear” padrão, então dá um efeito bem diferente. E você pode até tentar personalizar a animação bezier para criar um estilo de sublinhado único e exclusivo.

9. Sublinhados CSS personalizados

Aqui está outro estilo que realmente pode funcionar em qualquer site. O desenvolvedor Tristan Wilson criou esses sublinhados simples que limitam a linha alguns pixels abaixo do texto.

É sutil o suficiente para notar, mas certamente não fará uma grande diferença na usabilidade. Este efeito é realmente mais sobre estética do que usabilidade extra.

Se você deseja que seus sublinhados realmente se destaquem de todo o rebanho, este conjunto é um ótimo lugar para começar.

10. Encaixe entre Descensores

Anteriormente, mencionei a personalização de estilos de sublinhado para caber com descendentes no tipo. Bem, esta caneta de Jonathan Neal faz exatamente isso e usa nada mais do que HTML5 e CSS3.

Todo o efeito depende de algumas propriedades CSS3: box-shadow e text-shadow para ser mais preciso.

Isso cria a ilusão de que há espaço ao lado dos elementos descendentes e dá ao sublinhado uma sensação mais elegante.

Definitivamente uma escolha limpa para qualquer site e é uma boa maneira de alternar sua cor de sublinhado também.

11. Gradientes personalizados

Se você está realmente tentando ultrapassar os limites, tente retrabalhar esta caneta com seu estilo de gradiente de sublinhado personalizado.

O gradiente passa pelo CSS3 para que você possa alterar as cores para o que quiser. E se você pode acreditar, essa coisa não requer HTML extra para funcionar. Basta direcionar os links de âncora que você deseja e copiar/colar os códigos CSS para obter seus próprios sublinhados de gradiente.

De todos esses designs, certamente espero que haja um bom efeito que você possa tirar desta coleção.

Os designers nem sempre pensam em efeitos de sublinhado, mas há muito que você pode fazer com tipografia e, se você conhece o CSS, realmente, o céu é o limite.