Szórakozás a link hover effektusokkal
egy tervező, akivel dolgozom, egy nemrégiben tartott csapattalálkozón mutatta be a tömörítéseket. Csodálatos munkát végzett a tervezési rendszer koncepciójának összerakásával, az alkatrészektől a mintákig és minden között, ami minden front-end fejlesztőt boldoggá tenne.
de volt egy apró apró részlet a munkájában, amely megragadta a szemem: a linkek lebegési állapota egy csikorgás volt.
Huh! Nem csak nem láttam ezt korábban, az ötlet soha nem is fordult meg a fejemben. Kiderült, hogy rengeteg példány van az élő webhelyeken, az egyik a vázlat. Ez volt az a megvalósítás, amely inspirálta a tervezést.
hűvös, gondoltam. Tehetünk valamit, mint egy lineáris háttérgradiens vagy akár egy háttérkép. De! Ez nem volt a tervezés vége. Kiderült, hogy animált is. Ismét a vázlatból:
Whoa! Ez elég vad. Nem voltam biztos benne, hogyan kell megközelíteni ezt, őszintén, mert bármelyik kezdeti ötletem animálása nehéz lenne, különösen a böngészők közötti támogatás esetén.
Szóval, hogyan csinálta a vázlat? Kiderült, hogy SVG. Készíthetünk egy squiggly ösvényt, és elég könnyen animálhatjuk:
lásd Geoff Graham (@geoffgraham) tollát a CodePen-en.
de hogyan működik ez egy linkkel? Nos, használhatjuk az SVG – t a background-image tulajdonság:
lásd Geoff Graham (@geoffgraham) tollát a CodePen-en.
de ez elég szar, mert nem igazán tudjuk animálni. Ehhez jobb értékekre van szükségünk. A CSS-t azonban közvetlenül az SVG-n beilleszthetjük a background-image tulajdonságban. Nem tudjuk egyszerűen másolni és beilleszteni az SVG kódot a tulajdonságba, de megfelelő kódolással igen:
lásd Geoff Graham (@geoffgraham) tollát a CodePen-en.
és mivel az SVG tartalmazhat saját stílusokat a jelölésen belül, az animáció közvetlenül a background-image tulajdonságban dobható el, ugyanúgy, mint a HTML dokumentumfejben lévő CSS-sel vagy a HTML-ben lévő inline CSS-sel.
lásd a toll Squiggle által Geoff Graham (@geoffgraham) a CodePen.
kicsit másképp formázhatjuk, ha szeretnénk:
lásd a toll linkjét Effectz – Squiggle által Geoff Graham (@geoffgraham) a CodePen-en.
ez inspiráló!
fogalmam sincs, hogy egy animált squiggle jó felhasználói élményt nyújt-e, és őszintén szólva nem ez a bejegyzés lényege. A lényeg az, hogy a vázlatnak szórakoztató ötlete volt egy sima CSS megvalósítással.
ez elgondolkodtatott más nem szabványos (talán még szokatlan) hover stílusokon is, amelyeket linkekkel tehetünk. Ismét eldobja a használhatóságot, és nagyszerű időt tölt a CSS-szel …
A határ a háttérhez effektus
talán ugyanaz az alsó határ Az alapértelmezett linken növekedhet, és a hover link teljes hátterévé válhat:
lásd a toll Link Effectz – háttér hover által Geoff Graham (@geoffgraham) a CodePen.
fene, mi is tehetünk valami hasonló vízszintesen:
lásd a Pen Link Effectz – Horizotonal háttér Geoff Graham (@geoffgraham) a CodePen.
A vázolt Szövegeffektus
szedjük ki a betűszínt, és hagyjunk hátra egy körvonalat.
lásd a toll Link Effectz – vázlat hover által Geoff Graham (@geoffgraham) a CodePen.
az emelt szöveghatás
egy másik ötlet az, hogy a szöveget úgy emeljük fel, mintha az a hover oldalán nőne ki:
lásd a toll linkjét Effectz – emelt szöveg a hover-en Geoff Graham (@geoffgraham) a CodePen-en.
A Font Swapper-oo hatás
Ez annyira praktikus, hogy ez tesz engem LOL, de miért ne:
lásd a toll Link Effectz – Swap font hover által Geoff Graham (@geoffgraham) a CodePen.
A” Turn it Up, Chris ” effektus
sajnálom, Chris. Tudod, hogy szereted.
lásd a toll link Effectz – kapcsolja fel, Chris! írta: Geoff Graham (@geoffgraham) a CodePen oldalon.