Divertirsi con link hover effects
Un designer con cui lavoro stava presentando composizioni in una recente riunione del team. Aveva fatto un lavoro meraviglioso mettendo insieme il concetto di un sistema di progettazione, dai componenti ai modelli e tutto il resto che avrebbe reso felice qualsiasi sviluppatore front-end.
Ma c’era un piccolissimo dettaglio nel suo lavoro che ha attirato la mia attenzione: lo stato di hover per i link era uno scarabocchio.
Eh! Non solo non avevo visto che prima, l’idea non aveva mai nemmeno attraversato la mia mente. Risulta che ci sono un sacco di istanze di esso su siti live, uno è il Contorno. Questo è stato quello che è stato l’implementazione che ha ispirato il design.
Fresco, ho pensato. Possiamo fare qualcosa come un gradiente di sfondo lineare o anche un’immagine di sfondo. Ma! Non era la fine del progetto. Si scopre che è animato pure. Di nuovo, dal Contorno:
Whoa! E ‘ piuttosto selvaggio. Non ero sicuro di come affrontarlo, onestamente, perché animare una delle mie idee iniziali sarebbe stato difficile, specialmente per il supporto cross-browser.
Quindi, come ha fatto il Contorno? Si scopre, è SVG. Possiamo creare un percorso ondulato e animarlo abbastanza facilmente:
Vedi la penna Squiggle di Geoff Graham (@geoffgraham) su CodePen.
Ma come funziona con un collegamento? Bene, possiamo usare SVG sulla proprietàbackground-image:
Vedi la penna di Geoff Graham (@geoffgraham) su CodePen.
Ma è un po ‘ schifoso perché non possiamo davvero animarlo. Abbiamo bisogno di valori migliori per questo. Tuttavia, possiamo inline CSS direttamente sul SVG nella proprietàbackground-image. Non possiamo semplicemente copiare e incollare il codice SVG nella proprietà, ma possiamo con una codifica corretta:
Vedere la penna di Geoff Graham (@geoffgraham) su CodePen.
E, poiché SVG può contenere i propri stili all’interno del markup, l’animazione può essere lanciata proprio lì nella proprietà background-image, allo stesso modo in cui lo faremmo con CSS in un documento HTML head o CSS in linea in HTML.
Vedere la penna Squiggle di Geoff Graham (@geoffgraham) su CodePen.
Possiamo modellarlo in modo un po ‘ diverso, se vogliamo:
Vedi il link Pen Effectz – Squiggle di Geoff Graham (@geoffgraham) su CodePen.
Questo è stimolante!
Non ho idea se uno scarabocchio animato sia una buona esperienza utente e, francamente, non è questo il punto di questo post. Il punto è che Il Contorno ha avuto un’idea divertente con un’implementazione CSS liscia.
Questo mi ha fatto pensare ad altri stili di hover non standard (forse anche non convenzionali) che possiamo fare con i link. Ancora una volta, mettendo da parte l’usabilità e avere un grande tempo con CSS
Il bordo all’effetto Sfondo
Forse lo stesso bordo inferiore sul collegamento predefinito può crescere e diventare lo sfondo completo del collegamento al passaggio del mouse:
Vedere il collegamento Penna Effectz – Sfondo al passaggio del mouse di Geoff Graham (@geoffgraham) su CodePen.
Diamine, possiamo anche fare qualcosa di simile in orizzontale:
Vedere il Pen Link Effectz – Horizotonal Background di Geoff Graham (@geoffgraham) su CodePen.
L’effetto di testo delineato
Eliminiamo il colore del carattere e lasciamo un contorno dietro.
Vedere il collegamento a penna Effectz – Outline al passaggio del mouse di Geoff Graham (@geoffgraham) su CodePen.
L’effetto di testo sollevato
Un’altra idea è quella di aumentare il testo come se crescesse dalla pagina al passaggio del mouse:
Vedi il link Pen Effectz – Raised text on hover di Geoff Graham (@geoffgraham) su CodePen.
L’effetto Swapper-oo del font
Questo è così poco pratico che mi rende LOL, ma perché no:
Vedi il link Pen Effectz – Swap font al passaggio del mouse di Geoff Graham (@geoffgraham) su CodePen.
L’effetto “Alza, Chris”
Scusa, Chris. Sai che ti piace. ❤️
Vedere la penna Link Effectz-Alzare, Chris! di Geoff Graham (@geoffgraham) su CodePen.