Spaß mit Link-Hover-Effekten
Ein Designer, mit dem ich zusammenarbeite, präsentierte kürzlich bei einem Teammeeting Comps. Sie hatte wunderbare Arbeit geleistet, um das Konzept für ein Designsystem zusammenzustellen, von Komponenten bis zu Mustern und allem dazwischen, was jeden Front-End-Entwickler glücklich machen würde.
Aber es gab ein winziges Detail in ihrer Arbeit, das mir auffiel: Der Hover-Zustand für Links war ein Kringel.
Huh! Nicht nur, dass ich das vorher nicht gesehen hatte, die Idee war mir nie in den Sinn gekommen. Es stellt sich heraus, dass es auf Live-Sites viele Fälle davon gibt, eine davon ist die Gliederung. Das war die Umsetzung, die das Design inspirierte.
Cool, dachte ich mir. Wir können so etwas wie einen linearen Hintergrundverlauf oder sogar ein Hintergrundbild erstellen. Aber! Das war nicht das Ende des Designs. Es stellt sich heraus, dass es auch animiert ist. Wieder aus der Gliederung:
Whoa! Das ist ziemlich wild. Ich war mir ehrlich gesagt nicht sicher, wie ich das angehen sollte, da es schwierig sein würde, eine meiner ersten Ideen zu animieren, insbesondere für die browserübergreifende Unterstützung.
Also, wie hat die Gliederung das gemacht? Es stellt sich heraus, es ist SVG. Wir können einen Squiggly-Pfad erstellen und ihn ziemlich einfach animieren:
Siehe das Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Aber wie funktioniert das mit einem Link? Nun, wir können SVG auf der background-image Eigenschaft verwenden:
Siehe das Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Aber das ist irgendwie beschissen, weil wir das nicht wirklich animieren können. Dafür brauchen wir bessere Werte. Wir können CSS jedoch direkt auf der SVG in der Eigenschaft background-image . Wir können den SVG-Code nicht einfach kopieren und in die Eigenschaft einfügen, aber wir können mit einer richtigen Codierung:
Siehe das Pen Squiggle von Geoff Graham (@geoffgraham) auf CodePen.Und da SVG seine eigenen Stile innerhalb des Markups enthalten kann, kann die Animation genau dort in der Eigenschaft background-image geworfen werden, genauso wie wir es mit CSS in einem HTML-Dokument tun würden Kopf oder Inline-CSS in HTML.
Siehe den Stift Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Wir können es ein wenig anders gestalten, wenn wir möchten:
Siehe den Stift Link Effectz – Squiggle von Geoff Graham (@geoffgraham) auf CodePen.
Das ist inspirierend!
Ich habe keine Ahnung, ob ein animiertes Kringel für eine gute Benutzererfahrung sorgt, und ehrlich gesagt geht es in diesem Beitrag nicht darum. Der Punkt ist, dass die Gliederung eine lustige Idee mit einer glatten CSS-Implementierung hatte.
Das hat mich dazu gebracht, über andere nicht standardmäßige (vielleicht sogar unkonventionelle) Hover-Stile nachzudenken, die wir mit Links machen können. Auch hier die Benutzerfreundlichkeit beiseite werfen und eine großartige alte Zeit mit CSS verbringen …
Der Rand zum Hintergrundeffekt
Vielleicht kann derselbe untere Rand des Standardlinks wachsen und werden der vollständige Hintergrund des Links beim Schweben:
Siehe den Pen Link Effectz – Background on hover von Geoff Graham (@geoffgraham) auf CodePen.
Heck, wir können sogar etwas Ähnliches horizontal machen:
Siehe den Pen Link Effectz – Horizotonal Background von Geoff Graham (@geoffgraham) auf CodePen.
Der Umrissene Texteffekt
Lassen Sie uns die Schriftfarbe entfernen und einen Umriss hinterlassen.
Siehe den Stift–Link Effectz – Outline on hover von Geoff Graham (@geoffgraham) auf CodePen.
Der erhabene Texteffekt
Eine andere Idee ist, den Text so anzuheben, als ob er beim Schweben aus der Seite herauswächst:
Siehe den Stift–Link Effectz – Erhabener Text beim Schweben von Geoff Graham (@geoffgraham) auf CodePen.
Der Font Swapper-oo–Effekt
Das ist so unpraktisch, dass es mich LOL macht, aber warum nicht:
Siehe den Pen Link Effectz – Swap font on hover von Geoff Graham (@geoffgraham) auf CodePen.
Der „Turn it Up, Chris“-Effekt
Sorry, Chris. Du weißt, dass du es liebst. ❤️
Siehe den Stift Link Effectz – Dreh es auf, Chris! von Geoff Graham (@geoffgraham) auf CodePen.