10 frammenti CSS per la creazione di straordinari effetti di testo sottolineato animati

La sottolineatura CSS predefinita funziona alla grande. Chi potrebbe odiarlo?

Ma c'è sempre spazio per migliorare le cose. Potresti non pensare che ci sia molto che puoi fare con le sottolineature, ma se approfondisci l'animazione CSS ti renderai conto di quanto puoi davvero fare!

Ho selezionato innumerevoli stili di sottolineatura CSS e ho scelto le mie migliori scelte per le migliori sottolineature personalizzate sul Web. Se qualcuno di questi attira la tua attenzione, sentiti libero di entrare e provare a scherzare con il codice sorgente.

1. Sottolineatura alternata

Se sposti il ​​cursore tra questi link noterai qualcosa di piuttosto divertente. L'effetto sottolineato nel menu di navigazione cambia effettivamente gli stili tra i collegamenti.

Non solo, ma si muove attraverso il nav in modo dinamico per dare l'illusione che sia un unico blocco. Abbastanza bello vero?

Puoi fare tutto questo da solo con un po' di CSS aggiungendo il blocco sottolineato in un elemento HTML. Sorprendentemente semplice considerando quanto poco codice ti serve (circa 60 righe di CSS).

2. Si estende su più righe

Gli stili di interruzione di riga CSS sono complicati e non facili da aggirare. Ma con qualche ingegnoso sviluppatore Will King ha costruito questa penna creando un effetto di sottolineatura dinamico che può estendersi su più righe senza alcun bug.

Nota che questo si basa su un po 'di JavaScript per mantenere la linea intatta. Ma è anche abbastanza dinamico da funzionare con qualsiasi collegamento sulla pagina, quindi non importa come formatti il ​​testo.

Inoltre, l'intera cosa utilizza un gradiente CSS3 personalizzato per lo sfondo che è dannatamente interessante.

3. Sottolineatura scorrevole

Lo sviluppatore Ryan Morse ha creato questo semplice effetto di sottolineatura scorrevole basato esclusivamente sui CSS. È una soluzione piuttosto elegante considerando che non richiede nemmeno un elemento HTML aggiuntivo.

Puoi progettare i tuoi menu di navigazione come qualsiasi altro sito e utilizzare questo effetto CSS per creare animazioni a scorrimento dinamico. Inoltre, tutti i risultati possono essere modificati nel codice CSS che include allentamenti e durata totale.

4. Migliore sottolineatura del testo

A prima vista potresti non notare nulla di diverso con questa sottolineatura. Ma se lo confronti con la demo "predefinita" in basso nella pagina, vedrai che questo sembra davvero molto meglio.

Nella migliore sottolineatura del testo di Lukas Horak, noterai che la barra sotto il testo si adatta meglio agli elementi discendenti. Questo considera le forme delle lettere come "g" e "p" in cui le linee scendono al di sotto della normale altezza della linea.

Anche la sottolineatura stessa viene spinta leggermente più in basso sotto il testo, quindi assume un nuovo aspetto rispetto al browser predefinito.

5. Stili di animazione

Questa penna unica sfoggia alcuni effetti di sottolineatura personalizzati creati con puro CSS dallo sviluppatore Matthew Scott.

Vanta quattro stili di sottolineatura molto specifici basati su alcune transizioni CSS comuni:

• Da destra a sinistra
• Da sinistra a destra
• Animare verso l'esterno
• Animare verso l'interno

Noterai che funziona sulle comuni transizioni CSS3 che funzionano sia mentre ti fermi con il mouse sul link che spostando il cursore fuori dal link.

Sicuramente alcuni effetti interessanti e sono tutti abbastanza facili da portare nei tuoi progetti.

6. Più stili di animazione

Ecco un altro pacchetto di animazioni di sottolineatura personalizzate, queste create dallo sviluppatore Kseso.

Questi diventano un po' più estremi con gli stili di sottolineatura che spingono le ombre CSS3 per effetti luminosi. Probabilmente puoi usarlo come modello per creare un fantastico design per la spada laser di Star Wars se hai tempo (o semplicemente ami Star Wars).

7. Sto solo facendo un salto

Ho visto questo effetto su alcuni siti Web ed è probabilmente uno dei miei preferiti. La sottolineatura a discesa utilizza puro CSS e anima la linea visualizzata con un effetto di transizione.

Con questa animazione si ha ancora la sensazione che ogni "bordo" sottolineato si colleghi a ciascun collegamento. Mi piace più delle linee che scorrono tra i collegamenti perché questo effetto sembra più scattante e più diretto.

Se vuoi un vero approccio minimalista per sottolineare gli effetti, dovresti assolutamente provare a lavorare con questo codice.

8. Animazione in espansione

Lo stile di sottolineatura in espansione può essere trovato nel pacchetto di sottolineatura che ho menzionato in precedenza. Ma questa sottolineatura specifica è leggermente diversa perché utilizza i tempi di animazione personalizzati.

Si noti che sta usando la funzione cubic-bezier() per creare un'animazione unica al passaggio del mouse.

Questo viene eseguito un po' più velocemente della transizione "lineare" predefinita, quindi dà un effetto abbastanza diverso. E puoi anche provare a personalizzare tu stesso l'animazione di Bezier per creare uno stile di sottolineatura unico e tutto tuo.

9. Sottolineature CSS personalizzate

Ecco un altro stile che può davvero funzionare su qualsiasi sito web. Lo sviluppatore Tristan Wilson ha creato queste semplici sottolineature che delimitano la linea alcuni pixel più in basso sotto il testo.

È abbastanza sottile da notare, ma di certo non farà un'enorme differenza nell'usabilità. Questo effetto riguarda davvero l' estetica più che l'usabilità extra.

Se vuoi che le tue sottolineature si distinguano davvero da tutto il branco, questo set è un ottimo punto di partenza.

10. Adattamento tra discendenti

In precedenza ho menzionato la personalizzazione degli stili di sottolineatura per adattarli ai discendenti nel tipo. Bene, questa penna di Jonathan Neal fa proprio questo e non usa altro che HTML5 e CSS3.

L'intero effetto dipende da un paio di proprietà CSS3: box-shadow e text-shadow per la precisione.

Questo crea l'illusione che ci sia spazio sul lato degli elementi discensori e conferisce alla sottolineatura un aspetto più elegante.

Sicuramente una scelta pulita per qualsiasi sito Web ed è anche un bel modo per alternare il colore della sottolineatura.

11. Gradienti personalizzati

Se stai davvero cercando di superare i limiti, prova a rielaborare questa penna con il suo stile di sfumatura di sottolineatura personalizzato.

Il gradiente scorre attraverso CSS3 in modo da poter cambiare i colori in qualsiasi cosa tu voglia. E se puoi crederci questa cosa non richiede HTML aggiuntivo per funzionare. Scegli come target i link di ancoraggio che desideri e copia/incolla i codici CSS per ottenere le tue sottolineature sfumate.

Tra tutti questi design spero sicuramente che ci sia un bell'effetto che puoi portare via da questa collezione.

I designer non pensano sempre agli effetti di sottolineatura, ma c'è molto che puoi fare con la tipografia e se conosci i CSS allora davvero, il cielo è il limite.