10 fragmente CSS pentru crearea de efecte de text subliniate animate uimitoare

Sublinierea CSS implicită funcționează excelent. Cine l-ar putea ura?

Dar există întotdeauna loc de îmbunătățit lucrurile. S-ar putea să nu crezi că poți face multe cu sublinierea, dar dacă te aprofundezi în animația CSS, îți vei da seama cât de multe poți face cu adevărat!

Am sortat prin nenumărate stiluri de subliniere CSS și mi-am ales cele mai bune alegeri pentru cele mai bune subliniări personalizate de pe web. Dacă vreuna dintre acestea vă atrage atenția, nu ezitați să sari și să încerci să te încurci cu codul sursă.

1. Subliniere alternativă

Dacă mutați cursorul între aceste legături, veți observa ceva destul de amuzant. Efectul de subliniere din meniul de navigare schimbă de fapt stilurile între legături.

Nu numai asta, dar se mișcă în mod dinamic în navigare pentru a da iluzia că este un singur bloc. Destul de misto nu?

Toate acestea le puteți face singur cu un pic de CSS, adăugând blocul subliniat într-un element HTML. Surprinzător de simplu, având în vedere cât de puțin cod aveți nevoie (aproximativ 60 de linii de CSS).

2. Întinderea mai multor linii

Stilurile de întrerupere de linie CSS sunt complicate și nu sunt ușor de rezolvat. Dar cu ceva ingeniozitate, dezvoltatorul Will King a construit acest stilou creând un efect de subliniere dinamic care poate cuprinde mai multe linii fără erori.

Rețineți că acest lucru se bazează pe un pic de JavaScript pentru a menține linia intactă. Dar este și suficient de dinamic pentru a funcționa cu orice link de pe pagină, așa că nu contează modul în care formatați textul.

În plus, toată chestia asta folosește un gradient CSS3 personalizat pentru fundal, care este destul de grozav.

3. Subliniere glisantă

Dezvoltatorul Ryan Morse a creat acest efect de subliniere glisant foarte simplu, bazându-se exclusiv pe CSS. Este o soluție destul de elegantă, având în vedere că nici măcar nu necesită un element HTML suplimentar.

Puteți să vă proiectați meniurile de navigare la fel ca orice alt site și să utilizați acest efect CSS pentru a crea animații dinamice de alunecare. În plus, toate rezultatele pot fi modificate în codul CSS, care include uşuriri şi durata totală.

4. Subliniere mai bună a textului

La prima vedere este posibil să nu observați nimic diferit cu această subliniere. Dar dacă îl comparați cu demo-ul „implicit” de mai jos în pagină, veți vedea că arată într-adevăr mult mai bine.

În sublinierea mai bună a textului lui Lukas Horak, veți observa că bara de sub text se potrivește mai bine în elementele descendente. Aceasta ia în considerare formele de litere precum „g” și „p” unde liniile cad sub înălțimea obișnuită a liniei.

De asemenea, sublinierea în sine este împinsă ușor mai jos sub text, astfel încât capătă un aspect nou în comparație cu browserul implicit.

5. Stiluri de animație

Acest stilou unic prezintă câteva efecte de subliniere personalizate create cu CSS pur de către dezvoltatorul Matthew Scott.

Se mândrește cu patru stiluri de subliniere foarte specifice bazate pe unele tranziții comune CSS:

• De la dreapta la stanga
• De la stânga la dreapta
• Animarea spre exterior
• Animarea spre interior

Veți observa că acest lucru funcționează la tranzițiile comune CSS3 care funcționează atât în ​​timp ce treceți cu mouse-ul pe link, cât și în timp ce mutați cursorul de pe link.

Cu siguranță niște efecte interesante și toate sunt destul de ușor de portat în propriile proiecte.

6. Mai multe stiluri de animație

Iată un alt pachet de animații personalizate subliniate, acestea create de dev Kseso.

Acestea sunt puțin mai extreme cu stilurile de subliniere care împing umbrele CSS3 pentru efecte strălucitoare. Probabil că îl puteți folosi ca șablon pentru a realiza un design de sabie laser Star Wars, dacă aveți timp (sau pur și simplu vă place Războiul Stelelor).

7. Tocmai intrați

Am văzut acest efect pe câteva site-uri web și probabil că este unul dintre preferatele mele. Sublinierea drop-down folosește CSS pur și animează linia în vedere cu un efect de tranziție.

Cu această animație încă ai senzația că fiecare „graniță” subliniată se conectează la fiecare link. Îmi place mai mult decât liniile care alunecă între legături, deoarece acest efect se simte mai rapid și mai direct.

Dacă doriți o abordare minimalistă reală pentru a sublinia efectele, atunci cu siguranță ar trebui să încercați să lucrați cu acest cod.

8. Extinderea animației

Stilul de subliniere extins poate fi găsit în pachetul de subliniere pe care l-am menționat mai devreme. Dar această subliniere specifică este puțin diferită, deoarece folosește sincronizarea personalizată a animației.

Observați că folosește funcția cubic-bezier() pentru a crea o animație unică la hover.

Aceasta rulează puțin mai rapid decât tranziția „liniară” implicită, așa că dă un efect destul de diferit. Și puteți încerca chiar să personalizați singur animația Bezier pentru a crea un stil unic de subliniere.

9. Subliniere CSS personalizate

Iată un alt stil care poate funcționa cu adevărat pe orice site web. Dezvoltatorul Tristan Wilson a creat aceste subliniere simple care marginesc linia cu câțiva pixeli mai jos sub text.

Este suficient de subtil pentru a observa, dar cu siguranță nu va face o diferență enormă în utilizare. Acest efect se referă într-adevăr la estetică mai mult decât la o utilizare suplimentară.

Dacă vrei ca subliniatele tale să iasă cu adevărat în evidență din toată turma, acest set este un loc grozav de început.

10. Potrivirea între descendenți

Mai devreme am menționat personalizarea stilurilor de subliniere pentru a se potrivi cu descendenții în tip. Ei bine, acest stilou de Jonathan Neal face exact asta și nu folosește nimic mai mult decât HTML5 și CSS3.

Întregul efect depinde de câteva proprietăți CSS3: box-shadow și text-shadow pentru a fi precis.

Acest lucru creează iluzia că există spațiu în partea laterală a elementelor descendente și dă sublinierii o senzație mai clasică.

Cu siguranță o alegere curată pentru orice site web și este o modalitate plăcută de a alterna și culoarea sublinierii.

11. Degrade personalizate

Dacă chiar încercați să depășiți limitele, atunci încercați să reluați acest stilou cu stilul său personalizat de gradient de subliniere.

Gradientul trece prin CSS3, astfel încât să puteți schimba culorile în orice doriți. Și dacă vă vine să credeți, acest lucru nu necesită HTML suplimentar pentru a funcționa. Doar vizați orice link-uri de ancorare doriți și copiați/lipiți codurile CSS pentru a obține propriile subliniere în gradient.

Din toate aceste modele, sper cu siguranță că există un efect frumos pe care îl puteți scoate din această colecție.

Designerii nu se gândesc întotdeauna la efectele de subliniere, dar există multe lucruri pe care le puteți face cu tipografia și dacă vă cunoașteți cu privire la CSS, atunci cu adevărat, cerul este limita.