Bavíte se s efekty link hover
návrhář, se kterým pracuji, prezentoval comps na nedávném setkání týmu. Udělala skvělou práci sestavujeme společně koncept pro návrh systému, od komponent na vzory, a všechno mezi tím, že by se některý front-end developer šťastný.
ale v její práci byl malinký drobný detail, který mě zaujal: stav vznášení odkazů byl hádavý.
Co! Nejen, že jsem to předtím neviděl, myšlenka mě nikdy nenapadla. Ukázalo se, že na živých Webech je spousta případů, jeden je obrys. Právě ta byla inspirací pro návrh.
Cool, myslel jsem. Můžeme udělat něco jako lineární gradient pozadí nebo dokonce obrázek na pozadí. Ale! Tím návrh neskončil. Ukázalo se, že je také animovaný. Znovu, z Obrysu:
Whoa! To je dost divoké. Nebyl jsem si jistý, jak k tomu přistupovat, upřímně řečeno, protože animace některého z mých počátečních nápadů by byla obtížná, zejména pro podporu mezi prohlížeči.
jak to tedy obrys udělal? Ukázalo se, že je to SVG. Můžeme vytvořit klikatou cestu a animovat ji docela snadno:
viz pero Squiggle od Geoffa Grahama (@geoffgraham) na CodePen.
ale jak to funguje s odkazem? No, můžeme použít SVG na background-image ubytování:
Viz Pen Klikyhák Geoff Graham (@geoffgraham) na CodePen.
ale to je trochu mizerné, protože to opravdu nemůžeme animovat. K tomu potřebujeme lepší hodnoty. Můžeme však vložit CSS přímo na SVG do vlastnosti background-image. Nemůžeme jednoduše zkopírovat a vložit SVG kódu do majetku, ale můžeme s některými správné kódování:
Viz Pen Klikyhák Geoff Graham (@geoffgraham) na CodePen.
A, protože SVG může obsahovat své vlastní styly v rámci značky, animace může být vyhozen přímo v background-image majetku, stejným způsobem to uděláme s CSS v HTML dokumentu hlavy nebo inline CSS v HTML.
viz pero Squiggle od Geoffa Grahama (@geoffgraham) na CodePen.
můžeme styl to trochu jinak, pokud bychom jako:
Viz Pen Odkaz Effectz – Klikyhák Geoff Graham (@geoffgraham) na CodePen.
to je inspirující!
nemám ponětí, jestli animovaný hádka přispívá k dobrému uživatelskému zážitku a upřímně řečeno, to není smysl tohoto příspěvku. Jde o to, že obrys měl zábavný nápad s úhlednou implementací CSS.
to mě přimělo přemýšlet o jiném nestandardním (možná i nekonvenčním) stylu vznášení, který můžeme dělat s odkazy. Znovu, házet stranou použitelnost a mají velký ol‘ čas s CSS…
Hranice na Pozadí Efekt
Možná, že stejné spodní hranice na výchozí odkaz může růst a stát se na plný pozadí odkaz na visu:
viz odkaz Pen Effectz-Background on hover od Geoffa Grahama (@geoffgraham) na CodePen.
Sakra, můžeme udělat i něco podobného horizontálně:
Viz Pen Odkaz Effectz – Horizotonal Pozadí, tím, že Geoff Graham (@geoffgraham) na CodePen.
nastíněný textový efekt
odstraníme barvu písma a zanecháme obrys.
viz odkaz na pero Effectz-Outline on hover od Geoffa Grahama (@geoffgraham) na CodePen.
zvýšené Textový Efekt
Další myšlenkou je získat text, jako kdyby to roste ven ze stránky na visu:
Viz Pen Odkaz Effectz – Zvýšil textu na visu od Geoff Graham (@geoffgraham) na CodePen.
Písmo Swapper-oo Efekt
To je tak nepraktické, že to dělá mě, LOL, ale proč ne:
Viz Pen Odkaz Effectz – Swap písmo na přechodu od Geoff Graham (@geoffgraham) na CodePen.
the“ Turn it Up, Chris “ Effect
Sorry, Chris. Víš, že to miluješ. ❤
viz odkaz na pero Effectz-otočte to, Chrisi! autor: Geoff Graham (@geoffgraham) na CodePen.