Mă distrez cu link hover effects
un designer cu care lucrez prezenta comps la o întâlnire recentă a echipei. Ea a făcut o treabă minunată punerea cap la cap conceptul pentru un sistem de proiectare, de la componente la modele și totul în între care ar face orice dezvoltator front-end fericit.
dar a existat un mic detaliu în munca ei care mi-a atras atenția: starea de hover pentru legături a fost un squiggle.
Huh! Nu numai că nu am văzut asta înainte, ideea nici măcar nu mi-a trecut prin minte. Se pare că există o mulțime de cazuri de ea pe site-uri live, unul fiind conturul. Acesta a fost cel care a fost implementarea care a inspirat designul.
Cool, m-am gândit. Putem face ceva de genul unui gradient de fundal liniar sau chiar o imagine de fundal. Dar! Acesta nu a fost sfârșitul proiectului. Se pare că este animat, de asemenea. Din nou, din schiță:
Whoa! Asta e destul de sălbatic. Nu eram sigur cum să abordez acest lucru, sincer, deoarece animarea oricăreia dintre ideile mele inițiale ar fi dificilă, în special pentru suportul cross-browser.
deci, cum a făcut conturul? Se pare că e SVG. Putem face o cale squiggly și anima destul de ușor:
a se vedea Pen Squiggle de Geoff Graham (@geoffgraham) pe CodePen.
dar cum funcționează asta cu un link? Ei bine, putem folosi SVG pe background-image proprietate:
a se vedea Pen Squiggle de Geoff Graham (@geoffgraham) pe CodePen.
dar asta e cam nasol pentru că nu putem anima cu adevărat asta. Avem nevoie de valori mai bune pentru asta. Cu toate acestea, putem inline CSS direct pe SVG în background-image proprietate. Nu putem pur și simplu să copiem și să lipim codul SVG în proprietate, dar putem cu o codificare adecvată:
vedeți stiloul Squiggle de Geoff Graham (@geoffgraham) pe CodePen.
și, deoarece SVG poate conține propriile stiluri în marcaj, animația poate fi aruncată chiar acolo înbackground-image proprietate, la fel cum am face-o cu CSS într-un cap de document HTML sau CSS inline în HTML.
a se vedea Squiggle stilou de Geoff Graham (@geoffgraham) pe CodePen.
putem să – l Stil un pic diferit, dacă ne-ar plăcea:
a se vedea link-ul Effectz Pen-Squiggle de Geoff Graham (@geoffgraham) pe CodePen.
acest lucru este inspirat!
nu am nici o idee dacă un squiggle animat face pentru o experiență bună de utilizare și, sincer, că nu este punctul de acest post. Ideea este că schița a avut o idee distractivă cu o implementare CSS slick.
asta m-a făcut să mă gândesc la alte stiluri de hover non-standard (poate chiar neconvenționale) pe care le putem face cu link-urile. Din nou, se clatina deoparte uzabilitate și au un timp grand ol ‘ cu CSS…
Border la efectul de fundal
poate că aceeași frontieră de jos pe link-ul implicit poate crește și să devină fundalul complet al link-ul de pe hover:
a se vedea link – ul Effectz stilou-fundal pe hover de Geoff Graham (@geoffgraham) pe CodePen.
Heck, putem face chiar ceva similar pe orizontală:
a se vedea efectul link – ul Penz-fundal Horizotonal de Geoff Graham (@geoffgraham) pe CodePen.
efectul de Text conturat
să eliminăm culoarea fontului și să lăsăm un contur în urmă.
a se vedea link – ul Effectz stilou-schiță pe hover de Geoff Graham (@geoffgraham) pe CodePen.
efectul de text ridicat
o altă idee este de a ridica textul ca și cum ar crește din pagină pe hover:
a se vedea efectul link – ului Penz-textul ridicat pe hover de Geoff Graham (@geoffgraham) pe CodePen.
Font Swapper-oo efect
acest lucru este atât de practic încât mă face LOL, dar de ce nu:
a se vedea Pen link Effectz – Swap font pe hover de Geoff Graham (@geoffgraham) pe CodePen.
efectul „dă-l mai tare, Chris”
scuze, Chris. Știi că-ți place.
a se vedea efectul link-ul Penz – porniți-l, Chris! de Geoff Graham (@geoffgraham) pe CodePen.