Ha kul med link hover effects
en designer jag jobbar med presenterade comps vid ett nyligen lagmöte. Hon hade gjort ett underbart jobb pussla ihop konceptet för ett designsystem, från komponenter till mönster och allt däremellan som skulle göra någon front-end utvecklare glad.
men det fanns en liten liten detalj i hennes arbete som fångade mitt öga: svävartillståndet för länkar var en squiggle.
Huh! Inte bara hade jag inte sett det förut, tanken hade aldrig ens slagit mig. Det visar sig att det finns många fall av det på live-webbplatser, en är konturen. Det var den som var implementeringen som inspirerade designen.
coolt, tänkte jag. Vi kan göra något som en linjär bakgrundsgradient eller till och med en bakgrundsbild. Men! Det var inte slutet på designen. Visar sig att det är animerat också. Återigen, från konturen:
Whoa! Det är ganska vildt. Jag var inte säker på hur jag skulle närma mig det, ärligt, för att animera någon av mina första ideer skulle vara svårt, särskilt för stöd för webbläsare.
Så, hur gjorde konturen det? Visas, det är SVG. Vi kan göra en squiggly väg och animera den ganska enkelt:
se pennan Squiggle av Geoff Graham (@geoffgraham) på CodePen.
men hur fungerar det med en länk? Tja, vi kan använda SVG påbackground-image egendom:
se pennan Squiggle av Geoff Graham (@geoffgraham) på CodePen.
men det är ganska skit eftersom vi inte riktigt kan animera det. Vi behöver bättre värderingar för det. Vi kan dock infoga CSS direkt på SVG i egenskapen background-image. Vi kan inte bara kopiera och klistra in SVG-koden i egenskapen, men vi kan med någon korrekt kodning:
se pennan Squiggle av Geoff Graham (@geoffgraham) på CodePen.
och eftersom SVG kan innehålla sina egna stilar inom markeringen kan animationen kastas direkt där i egenskapen background-image, på samma sätt som vi skulle göra det med CSS i ett HTML-dokumenthuvud eller inline CSS i HTML.
se pennan Squiggle av Geoff Graham (@geoffgraham) på CodePen.
Vi kan utforma det lite annorlunda, om vi vill:
se Pen Link Effectz – Squiggle av Geoff Graham (@geoffgraham) på CodePen.
detta är inspirerande!
Jag har ingen aning om en animerad squiggle ger en bra användarupplevelse och det är uppriktigt sagt inte meningen med det här inlägget. Poängen är att konturen hade en rolig IDE med en smidig CSS-implementering.
det fick mig att tänka på andra icke-standardiserade (kanske till och med okonventionella) svävar styling vi kan göra med länkar. Återigen, kasta åt sidan användbarhet och ha en stor ol ’ tid med CSS…
gränsen till bakgrundseffekt
kanske samma nedre kant på standardlänken kan växa och bli den fullständiga bakgrunden till länken på hover:
se pennan länk Effectz – Bakgrund på hover av Geoff Graham (@geoffgraham) på CodePen.
Heck, vi kan till och med göra något liknande horisontellt:
se Pennlänken Effectz – Horizotonal bakgrund av Geoff Graham (@geoffgraham) på CodePen.
den skisserade texteffekten
Låt oss ta bort teckensnittsfärgen och lämna en kontur bakom.
se pennan länk Effectz – kontur på hover av Geoff Graham (@geoffgraham) på CodePen.
den upphöjda texteffekten
en annan IDE är att höja texten som om den växer ut ur sidan på hover:
se Pen Link Effectz – Raised text på hover av Geoff Graham (@geoffgraham) på CodePen.
typsnittet Swapper – oo effekt
detta är så opraktiskt att det gör mig LOL, men varför inte:
se pennan länk Effectz – Swap teckensnitt på hover av Geoff Graham (@geoffgraham) på CodePen.
”skruva upp det, Chris” – effekten
ledsen, Chris. Du vet att du älskar det.
se Pen Link Effectz – Vrid upp det, Chris! av Geoff Graham (@geoffgraham) på CodePen.