Plezier hebben met link hover-effecten
een ontwerper waarmee ik werk presenteerde comps tijdens een recente teamvergadering. Ze had geweldig werk verricht met het samenstellen van het concept voor een ontwerpsysteem, van componenten tot patronen en alles daartussenin dat elke front-end ontwikkelaar blij zou maken.
maar er was een piepklein detail in haar werk dat mijn aandacht trok: de hover-status voor links was een kronkel.
Huh! Niet alleen had ik dat niet eerder gezien, het idee was zelfs nooit bij me opgekomen. Blijkt dat er tal van gevallen van het op live sites, een is de Outline. Dat was de uitvoering die het ontwerp inspireerde.
Cool, dacht ik. We kunnen zoiets doen als een lineair achtergrondverloop of zelfs een achtergrondafbeelding. Maar! Dat was niet het einde van het ontwerp. Het blijkt ook geanimeerd te zijn. Nogmaals, uit de Outline:
Whoa! Dat is nogal wild. Ik was niet zeker hoe dat te benaderen, eerlijk, omdat het animeren van een van mijn eerste ideeën moeilijk zou zijn, vooral voor cross-browser ondersteuning.
dus, hoe deed de omtrek het? Het blijkt SVG te zijn. We kunnen een kronkelend pad maken en het vrij gemakkelijk animeren:
zie de pen kronkeling van Geoff Graham (@geoffgraham) op CodePen.
maar hoe werkt dat met een link? Nou, we kunnen SVG gebruiken op debackground-image eigenschap:
zie de pen kronkel door Geoff Graham (@geoffgraham) op CodePen.
maar dat is een beetje waardeloos omdat we dat niet echt kunnen animeren. Daar hebben we betere waarden voor nodig. Echter, we kunnen CSS direct inline op de SVG in de background-image eigenschap. We kunnen de SVG-code niet gewoon kopiëren en plakken in de eigenschap, maar we kunnen wel met de juiste codering:
zie de pen kronkel door Geoff Graham (@geoffgraham) op CodePen.
en, omdat SVG zijn eigen stijlen kan bevatten binnen de opmaak, kan de animatie daar worden gegooid in de eigenschap background-image, op dezelfde manier als we het zouden doen met CSS in een HTML-documentkop of inline CSS in HTML.
zie de pen kronkel door Geoff Graham (@geoffgraham) op CodePen.
We kunnen het een beetje anders vormgeven, als we willen:
zie de Pen Link Effectz – Squiggle van Geoff Graham (@geoffgraham) op CodePen.
dit is inspirerend!
Ik heb geen idee of een geanimeerde kronkel voor een goede gebruikerservaring zorgt en, eerlijk gezegd, dat is niet het punt van dit bericht. Het punt is dat de Outline had een leuk idee met een gelikte CSS implementatie.
dat zette me aan het denken over andere niet-standaard (misschien zelfs onconventionele) hover styling die we kunnen doen met links. Nogmaals, wegwerpen bruikbaarheid en hebben een grote ol ‘ tijd met CSS …
de grens naar achtergrond Effect
misschien kan dezelfde onderste rand op de standaard link groeien en de volledige achtergrond van de link worden bij zweven:
zie de Pen Link Effectz – Background on hover van Geoff Graham (@geoffgraham) op CodePen.
Heck, we kunnen zelfs iets dergelijks horizontaal doen:
zie de Pen Link Effectz – Horizononal Background van Geoff Graham (@geoffgraham) op CodePen.
het omlijnde teksteffect
laten we de lettertypekleur verwijderen en een omtrek achterlaten.
zie de pen Link Effectz – Outline on hover door Geoff Graham (@geoffgraham) op CodePen.
het verhoogde teksteffect
een ander idee is om de tekst te verhogen alsof het groeit uit de pagina op de hover:
zie de Pen Link Effectz – verhoogde tekst op de hover door Geoff Graham (@geoffgraham) op CodePen.
het Font Swapper-oo Effect
Dit is zo onpraktisch dat het me LOL maakt, maar waarom niet:
zie de Pen Link Effectz – Swap font on hover van Geoff Graham (@geoffgraham) op CodePen.
het “Turn it Up, Chris” Effect
Sorry, Chris. Je weet dat je ervan houdt. ❤ ️
zie het pen link Effectz – zet het harder, Chris! door Geoff Graham (@geoffgraham) op CodePen.