Having fun with link hover effects
a designer I work with was presenting comps at a recent team meeting. Hän oli tehnyt hienoa työtä kootessaan konseptin suunnittelujärjestelmäksi, komponenteista kuvioihin ja kaikesta siltä väliltä, mikä tekisi kenestä tahansa front-end-kehittäjästä onnellisen.
mutta hänen töissään oli yksi pikkuruinen yksityiskohta, joka kiinnitti huomioni: linkkien hover-tila oli squiggle.
Huh! Sen lisäksi, etten ollut nähnyt sitä aiemmin, ajatus ei ollut edes käynyt mielessäni. Käy ilmi, että on olemassa paljon esimerkkejä siitä live-sivustoja, yksi on ääriviivat. Juuri toteutus inspiroi suunnittelua.
Cool, arvelin. Voimme tehdä jotain lineaarinen taustagradientti tai jopa taustakuvan. Mutta! Suunnittelu ei päättynyt siihen. Se on myös animoitu. Jälleen ääriviivoista:
Whoa! Aika hurjaa. En ollut varma, miten lähestyä sitä, rehellisesti, koska animointi tahansa minun alkuperäisiä ideoita olisi vaikeaa, erityisesti cross-browser tuki.
niin, miten ääriviivat tekivät sen? Se olikin SVG. Voimme tehdä squigglyn polun ja animoida sen melko helposti:
See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.
mutta miten se toimii linkin kanssa? We can use SVG on the background-image property:
See the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.
mutta se on aika surkeaa, koska emme voi oikein animoida sitä. Siihen tarvitaan parempia arvoja. Kuitenkin, voimme inline CSS suoraan SVG background-image ominaisuus. SVG-koodia ei voi yksinkertaisesti kopioida ja liittää ominaisuuteen, mutta asiallisella koodauksella:
Katso Geoff Grahamin (@geoffgraham) Pen Squiggle Koodinpätkällä.
ja koska SVG voi sisältää omat tyylinsä markupin sisällä, animaation voi heittää sinne background-image ominaisuus, samalla tavalla tekisimme sen CSS: llä HTML-dokumenttipäässä tai inline CSS: llä HTML: ssä.
see the Pen Squiggle by Geoff Graham (@geoffgraham) on CodePen.
we can style it up a little differently, if we ’ d like:
See the Pen Link Effectz – Squiggle by Geoff Graham (@geoffgraham) on CodePen.
tämä on inspiroivaa!
minulla ei ole aavistustakaan, jos animoitu squiggle tekee hyvän käyttökokemuksen ja, suoraan sanottuna, se ei ole pointti tässä viestissä. Lähtökohtana on, että ääriviivat oli hauska idea liukas CSS täytäntöönpanoa.
se sai minut ajattelemaan muita epätyypillisiä (ehkä jopa epäsovinnaisia) hover-stailauksia, joita voimme tehdä linkeillä. Jälleen, heittää syrjään käytettävyyden ja on grand ol ’ aikaa CSS…
Raja Taustavaikutukseen
ehkä sama alaraja oletuslinkki voi kasvaa ja tulla koko tausta linkin hover:
See the Pen Link Effectz – Background on hover by Geoff Graham (@geoffgraham) on CodePen.
heck, voimme jopa tehdä jotain vastaavaa vaakatasossa:
Katso Geoff Grahamin (@geoffgraham) Pen Link Effectz – Horizotonal Background Codepenillä.
hahmoteltu Tekstiefekti
riisutaan Fontin väri ja jätetään ääriviivat taakse.
See the Pen Link Effectz – Outline on hover by Geoff Graham (@geoffgraham) on CodePen.
kohotettu Tekstiefekti
toinen idea on nostaa teksti ikään kuin se kasvaisi ulos sivulta hover:
Katso Geoff Grahamin (@geoffgraham) kirjoittama Pen Link Effectz – korotettu teksti Hover-sivulla Codepenissä.
fontti Swapper-oo – efekti
Tämä on niin epäkäytännöllinen, että se tekee minusta LOL, mutta miksi ei:
Katso Geoff Grahamin (@geoffgraham) Hover-fontin Pen Link Effectz-Swap-fontti Koodinpätkällä.
”Turn it Up, Chris” – efekti
Sori, Chris. Tiedät rakastavasi sitä. ❤️
See the Pen Link Effectz – Turn it up, Chris! by Geoff Graham (@geoffgraham) on CodePen.