At have det sjovt med link hover effects
en designer, jeg arbejder med, præsenterede comps på et nyligt teammøde. Hun havde gjort et vidunderligt stykke arbejde sammen konceptet for et designsystem, fra komponenter til mønstre og alt imellem, der ville gøre enhver front-end udvikler glad.
men der var en teeny lille detalje i hendes arbejde, der fangede mit øje: hover-tilstanden for links var en krusning.
Huh! Ikke kun havde jeg ikke set det før, ideen havde aldrig engang krydset mig. Det viser sig, at der er masser af forekomster af det på live-sider, den ene er omridset. Det var den, der var implementering, der inspirerede designet.
Cool, tænkte jeg. Vi kan gøre noget som en lineær baggrundsgradient eller endda et baggrundsbillede. Men! Det var ikke slutningen på designet. Det viser sig, at det også er animeret. Igen fra omridset:
hvem! Det er ret vildt. Jeg var ikke sikker på, hvordan jeg skulle nærme mig det, ærligt, fordi det ville være svært at animere nogen af mine oprindelige ideer, især til understøttelse af tværs.
så hvordan gjorde omridset det? Det viser sig, det er SVG. Vi kan lave en skæv sti og animere den temmelig let:
se pennen krumme af Geoff Graham (@geoffgraham) på CodePen.
men hvordan fungerer det med et link? Nå, vi kan bruge SVG på background-image ejendom:
se pennen vride af Geoff Graham (@geoffgraham) på CodePen.
men det er lidt crappy, fordi vi ikke rigtig kan animere det. Vi har brug for bedre værdier for det. Vi kan dog inline CSS direkte på SVG i background-image ejendom. Vi kan ikke blot kopiere og indsætte SVG-koden i ejendommen, men vi kan med en ordentlig kodning:
se pennen vride af Geoff Graham (@geoffgraham) på CodePen.
og da SVG kan indeholde sine egne stilarter inden for markeringen, kan animationen kastes lige der ibackground-image ejendom, på samme måde som vi ville gøre det med CSS i et HTML-dokumenthoved eller inline CSS i HTML.
se pennen vride af Geoff Graham (@geoffgraham) på CodePen.
Vi kan style det lidt anderledes, hvis vi gerne vil:
se Pen – linket effekt af Geoff Graham (@geoffgraham) på CodePen.
dette er inspirerende!
jeg aner ikke, om en animeret krusning giver en god brugeroplevelse, og ærligt talt er det ikke meningen med dette indlæg. Pointen er, at omridset havde en sjov ide med en glat CSS-implementering.
det fik mig til at tænke på anden ikke-standard (måske endda ukonventionel) hover styling, vi kan gøre med links. Igen, kaste bort usability og har en grand ol’ tid med CSS…
grænsen til baggrunden effekt
måske den samme nederste kant på standard link kan vokse og blive den fulde baggrund af linket på hover:
se pennen Link effekt – Baggrund på hover af Geoff Graham (@geoffgraham) på CodePen.
Heck, vi kan endda gøre noget lignende vandret:
se Pen Link effekt – horisontal baggrund af Geoff Graham (@geoffgraham) på CodePen.
den skitserede teksteffekt
lad os fjerne skriftfarven og efterlade en oversigt.
se Penlink – effekten på hover af Geoff Graham (@geoffgraham) på CodePen.
den hævede teksteffekt
en anden ide er at hæve teksten, som om den vokser ud af siden på hover:
se Penlinket effekt – hævet tekst på hover af Geoff Graham (@geoffgraham) på CodePen.
Skrifttypeeffekten
Dette er så upraktisk, at det gør mig LOL, men hvorfor ikke:
se Penlinket effekt-Skift skrifttype på hover af Geoff Graham (@geoffgraham) på CodePen.
“skru det op, Chris” effekt
Undskyld, Chris. Du ved, du elsker det.
se pen link effekt – skru det op, Chris! af Geoff Graham (@geoffgraham) på CodePen.