Ha det gøy med link hover effects
en designer jeg jobber med, presenterte comps på et nylig lagmøte. Hun hadde gjort en fantastisk jobb å sette sammen konseptet for et designsystem, fra komponenter til mønstre og alt i mellom som ville gjøre enhver front-end utvikler lykkelig.Men det var en bitte liten detalj i hennes arbeid som fanget mitt øye: hover tilstand for lenker var en squiggle.
Huh! Ikke bare hadde jeg ikke sett det før, ideen hadde aldri engang streifet meg. Det viser seg at det er mange forekomster av det på live-nettsteder, en er Omrisset. Det var det som var implementeringen som inspirerte designet.
Kult, tenkte jeg. Vi kan gjøre noe som en lineær bakgrunnsgradient eller til og med et bakgrunnsbilde. Men! Det var ikke slutten på designet. Det viser seg at det også er animert. Igjen, Fra Omrisset:
Whoa! Det er ganske vilt. Jeg var ikke sikker på hvordan jeg skulle nærme meg det, ærlig, fordi det ville være vanskelig å animere noen av mine første ideer, spesielt for nettleser-støtte.
Så, hvordan Gjorde Omrisset det? Viser seg, DET ER SVG. Vi kan lage en skarp sti og animere det ganske enkelt:
Se Pennen Squiggle Av Geoff Graham (@geoffgraham) På CodePen.
men hvordan fungerer det med en lenke? Vel, VI kan bruke SVG påbackground-image eiendom:
se Pennen Squiggle Av Geoff Graham (@geoffgraham) På CodePen.
Men det er litt crappy fordi vi egentlig ikke kan animere det. Vi trenger bedre verdier for det. VI kan imidlertid inline CSS direkte på SVG ibackground-image egenskapen. VI kan ikke bare kopiere OG lime INN SVG-koden i eiendommen, men vi kan med litt riktig koding:
Se Pennen Squiggle Av Geoff Graham (@geoffgraham) På CodePen.
OG SIDEN SVG kan inneholde egne stiler i markeringen, kan animasjonen kastes der ibackground-image – egenskapen, på samme måte som VI ville gjøre det MED CSS i ET HTML-dokumenthode eller inline CSS i HTML.
Se Pennen Squiggle Av Geoff Graham (@geoffgraham) På CodePen.
Vi kan style det opp litt annerledes, hvis vi ønsker:
se Pen Link Effectz-Squiggle Av Geoff Graham (@geoffgraham) På CodePen.
dette er inspirerende!
jeg aner ikke om en animert squiggle gir en god brukeropplevelse, og det er ærlig talt ikke poenget med dette innlegget. Poenget er At Omrisset hadde en morsom ide med en glatt CSS-implementering.
Det fikk meg til å tenke på andre ikke-standard (kanskje til og med ukonvensjonelle) hover styling vi kan gjøre med lenker. Igjen, kaste bort brukervennlighet og ha en stor ol’ tid med CSS…
Grensen Til Bakgrunnseffekt
Kanskje den samme bunngrensen på standardlinken kan vokse og bli full bakgrunn av lenken på hover:
se Pen Link Effectz-Bakgrunn på hover Av Geoff Graham (@geoffgraham) På CodePen.
Heck, vi kan til og med gjøre noe lignende horisontalt:
se Pen Link Effectz-Horizotonal Bakgrunn Av Geoff Graham (@geoffgraham)På CodePen.
Den Skisserte Teksteffekten
la oss strippe ut skriftfargen og legge en oversikt bak.
se Pen Link Effectz-Omrisset på hover Av Geoff Graham (@geoffgraham)På CodePen.
Den Hevede Teksteffekten
En annen ide er å heve teksten som om den vokser ut av siden på hover:
se Pen Link Effectz-Hevet tekst på hover av Geoff Graham (@geoffgraham) På CodePen.
Font Swapper-Oo Effect
Dette er så upraktisk at det gjør MEG LOL, men hvorfor ikke:
se Pen Link Effectz – Swap font på hover Av Geoff Graham (@geoffgraham) På CodePen.
«Slå Den Opp, Chris» Effekt
Beklager, Chris. Du vet du elsker det. ❤ ️
se pennlenken Effectz – Skru Den Opp, chris! av Geoff Graham (@geoffgraham) På CodePen.