Coole CSS-Hover-Effekte, die Hintergrund-Clipping, Masken und 3D verwenden

Wir haben uns nun eine Reihe von Beiträgen zu interessanten Ansätzen für CSS-Hover-Effekte angesehen. Wir begannen mit einer Reihe von Beispielen, die CSS background Eigenschaften verwenden, und gingen dann zur text-shadow Eigenschaft über, bei der wir technisch gesehen keine Schatten verwendet haben. Wir haben sie auch mit CSS-Variablen und calc() kombiniert, um den Code zu optimieren und die Verwaltung zu erleichtern.

In diesem Artikel bauen wir auf diesen beiden Artikeln auf, um noch komplexere CSS-Hover-Animationen zu erstellen. Wir sprechen über Hintergrund-Clipping, CSS-Masken und tauchen sogar in die Perspektive von 3D ein. Mit anderen Worten, wir werden diesmal fortgeschrittene Techniken erkunden und die Grenzen dessen ausloten, was CSS mit Hover-Effekten leisten kann!

---

Hier ist nur ein kleiner Vorgeschmack auf das, was wir erstellen

Hover-Effekte mit background-clip

Sprechen wir über background-clip. Diese CSS-Eigenschaft akzeptiert ein Schlüsselwort wie text, das es uns ermöglicht, Farbverläufe auf den Text eines Elements anzuwenden, anstatt auf den eigentlichen Hintergrund.

Zum Beispiel können wir die Textfarbe beim Hovern ändern, so wie wir es mit der color Eigenschaft tun würden, aber auf diese Weise animieren wir die Farbänderung

Alles, was ich getan habe, ist, background-clip: text zu dem Element hinzuzufügen und background-position zu transitionieren. Es muss nicht komplizierter sein!

Aber wir können es besser machen, wenn wir mehrere Farbverläufe mit unterschiedlichen background-clip Werten kombinieren.

In diesem Beispiel verwende ich zwei verschiedene Farbverläufe und zwei Werte für background-clip. Der erste Hintergrund-Farbverlauf wird auf den Text zugeschnitten (dank des text Werts), um die Farbe beim Hovern festzulegen, während der zweite Hintergrund-Farbverlauf die untere Unterstreichung erzeugt (dank des padding-box Werts). Alles andere wurde direkt aus der Arbeit im ersten Artikel dieser Reihe übernommen.

Wie wäre es mit einem Hover-Effekt, bei dem der Balken von oben nach unten gleitet, so dass es aussieht, als würde der Text gescannt und dann eingefärbt

Diesmal habe ich die Größe des ersten Farbverlaufs geändert, um die Linie zu erzeugen. Dann schiebe ich sie mit dem anderen Farbverlauf, der die Textfarbe aktualisiert, um die Illusion zu erzeugen! Sie können visualisieren, was in diesem Pen passiert

Wir haben nur an der Oberfläche dessen gekratzt, was wir mit unseren background-clipping-Fähigkeiten tun können! Diese Technik ist jedoch wahrscheinlich etwas, das Sie in der Produktion vermeiden möchten, da Firefox dafür bekannt ist, eine Menge gemeldete Fehler bezüglich background-clip zu haben. Safari hat ebenfalls Unterstützungsprobleme. Das lässt nur Chrome mit solider Unterstützung für diese Dinge, also vielleicht behalten Sie es im Hinterkopf, während wir weitermachen.

Kommen wir zu einem weiteren Hover-Effekt mit background-clip

Sie denken wahrscheinlich, dieser hier sieht im Vergleich zu dem, was wir gerade behandelt haben, super einfach aus – und Sie haben Recht, hier ist nichts Besonderes. Alles, was ich tue, ist, einen Farbverlauf zu verschieben, während ich die Größe eines anderen erhöhe.

Aber wir sind hier, um uns fortgeschrittene Hover-Effekte anzusehen, richtig? Ändern wir es ein wenig, damit die Animation anders ist, wenn der Mauszeiger das Element verlässt. Derselbe Hover-Effekt, aber ein anderes Ende der Animation

Cool, oder? Zerlegen wir den Code

.hover {
  --c: #1095c1; /* the color */

  color: #0000;
  background: 
    linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, 
    linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat,
    var(--_c, #0000);
  -webkit-background-clip: text, padding-box, padding-box;
          background-clip: text, padding-box, padding-box;
  transition: 0s, color .5s, background-color .5s;
}
.hover:hover {
  color: #fff;
  --_c: var(--c);
  --_p: 100%;
  transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Wir haben drei Hintergrundebenen – zwei Farbverläufe und die background-color, die mit der --_c-Variable definiert ist, die anfangs auf transparent (#0000) gesetzt ist. Beim Hovern ändern wir die Farbe zu Weiß und die --_c-Variable zum Hauptfarbton (--c).

Hier ist, was bei dieser transition passiert: Zuerst wenden wir eine Übergangszeit auf alles an, aber wir verzögern color und background-color um 0.5s, um den Gleiteffekt zu erzeugen. Direkt danach ändern wir color und background-color. Möglicherweise bemerken Sie keine visuellen Änderungen, da der Text bereits weiß ist (dank des ersten Farbverlaufs) und der Hintergrund bereits auf den Hauptfarbton eingestellt ist (dank des zweiten Farbverlaufs).

Dann, beim Mouse-out, wenden wir eine sofortige Änderung auf alles an (beachten Sie die 0s Verzögerung), außer auf color und background-color, die eine Übergangszeit haben. Das bedeutet, wir setzen alle Farbverläufe auf ihre ursprünglichen Zustände zurück. Wiederum werden Sie wahrscheinlich keine visuellen Änderungen sehen, da sich die Textfarbe und die Hintergrundfarbe bereits beim Hovern geändert haben.

Zuletzt wenden wir das Ausblenden zur Farbe und eine background-color an, um den Mouse-out-Teil der Animation zu erstellen. Ich weiß, es kann schwierig sein, das zu begreifen, aber Sie können den Trick besser visualisieren, indem Sie verschiedene Farben verwenden

Fahren Sie oft mit der Maus über das Obige, und Sie werden die Eigenschaften sehen, die beim Hovern animiert werden, und die, die beim Mouse-out animiert werden. Sie können dann verstehen, wie wir zwei verschiedene Animationen für denselben Hover-Effekt erzielt haben.

Vergessen wir nicht die DRY-Switching-Technik, die wir in den vorherigen Artikeln dieser Serie verwendet haben, um die Code-Menge zu reduzieren, indem wir nur eine Variable für den Wechsel verwenden

.hover {
  --c: 16 149 193; /* the color using the RGB format */

  color: rgb(255 255 255 / var(--_i, 0));
  background:
    /* Gradient #1 */
    linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%,
    /* Gradient #2 */
    linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat,
    /* Background Color */
    rgb(var(--c)/ var(--_i, 0));
  -webkit-background-clip: text, padding-box, padding-box;
          background-clip: text, padding-box, padding-box;
  --_t: calc(var(--_i,0)*.5s);
  transition: 
    var(--_t),
    color calc(.5s - var(--_t)) var(--_t),
    background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover {
  --_i: 1;
}

Wenn Sie sich fragen, warum ich die RGB-Syntax für die Hauptfarbe gewählt habe, dann deshalb, weil ich mit der Alpha-Transparenz spielen musste. Ich benutze auch die Variable --_t, um eine redundante Berechnung in der transition Eigenschaft zu reduzieren.

Bevor wir zum nächsten Teil übergehen, hier sind weitere Beispiele für Hover-Effekte, die auf background-clip basieren. Es wäre zu lang, jeden einzelnen zu beschreiben, aber mit dem, was wir bisher gelernt haben, können Sie den Code leicht verstehen. Es kann eine gute Inspiration sein, einige davon selbst auszuprobieren, ohne auf den Code zu schauen.

Ich weiß, ich weiß. Dies sind verrückte und ungewöhnliche Hover-Effekte, und mir ist klar, dass sie in den meisten Situationen zu viel sind. Aber so übt und lernt man CSS. Denken Sie daran, wir versuchen, die Grenzen von CSS-Hover-Effekten zu erweitern. Der Hover-Effekt mag eine Neuheit sein, aber wir lernen dabei neue Techniken, die mit Sicherheit auch für andere Dinge verwendet werden können.

Hover-Effekte mit CSS mask

Rate mal? Die CSS-mask Eigenschaft verwendet Farbverläufe auf die gleiche Weise wie die background Eigenschaft, sodass Sie sehen werden, dass das, was wir als Nächstes erstellen, ziemlich unkompliziert ist.

Beginnen wir mit der Erstellung einer schicken Unterstreichung.

Ich verwende background, um einen zickzackförmigen unteren Rand in dieser Demo zu erstellen. Wenn ich eine Animation auf diese Unterstreichung anwenden wollte, wäre es mühsam, sie nur mit Hintergrund-Eigenschaften zu machen.

Geben Sie CSS mask ein.

Der Code mag seltsam aussehen, aber die Logik ist immer noch dieselbe wie bei allen vorherigen Hintergrundanimationen. Die mask besteht aus zwei Farbverläufen. Der erste Farbverlauf ist mit einer deckenden Farbe definiert, die den Inhaltsbereich abdeckt (dank des content-box Werts). Dieser erste Farbverlauf macht den Text sichtbar und verbirgt den unteren zickzackförmigen Rand. content-box ist der mask-clip Wert, der sich genauso verhält wie background-clip

linear-gradient(#000 0 0) content-box

Der zweite Farbverlauf bedeckt den gesamten Bereich (dank padding-box). Dieser hat eine Breite, die mit der Variablen --_p definiert ist, und wird auf der linken Seite des Elements platziert.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Jetzt müssen wir nur noch den Wert von --_p beim Hovern ändern, um einen Gleiteffekt für den zweiten Farbverlauf zu erzeugen und die Unterstreichung freizulegen.

.hover:hover {
  --_p: 100%;
  color: var(--c);
}

Die folgende Demo verwendet die Maskenlagen als Hintergründe, um den Trick besser sehen zu können. Stellen Sie sich vor, die grünen und roten Teile sind die sichtbaren Teile des Elements, während alles andere transparent ist. Das ist es, was die Maske tun wird, wenn wir dieselben Farbverläufe damit verwenden.

Mit einem solchen Trick können wir leicht viele Variationen erstellen, indem wir einfach eine andere Farbverlaufskonfiguration mit der mask Eigenschaft verwenden

Jedes Beispiel in dieser Demo verwendet eine leicht unterschiedliche Farbverlaufskonfiguration für die mask. Beachten Sie auch die Trennung im Code zwischen der Hintergrundkonfiguration und der Maskenkonfiguration. Sie können unabhängig voneinander verwaltet und gepflegt werden.

Lassen Sie uns die Hintergrundkonfiguration ändern, indem wir die zickzackförmige Unterstreichung durch eine wellenförmige Unterstreichung ersetzen

Eine weitere Sammlung von Hover-Effekten! Ich habe alle Maskenkonfigurationen beibehalten und den Hintergrund geändert, um eine andere Form zu erzeugen. Jetzt können Sie verstehen, wie ich 400 Hover-Effekte ohne Pseudo-Elemente erzielen konnte – und wir können immer noch mehr haben!

Wie wäre es mit so etwas

Hier ist eine Herausforderung für Sie: Der Rand im letzten Demo ist ein Farbverlauf, der die mask Eigenschaft verwendet, um ihn freizulegen. Können Sie die Logik hinter der Animation herausfinden? Sie mag auf den ersten Blick komplex erscheinen, aber sie ist sehr ähnlich zur Logik, die wir für die meisten anderen Hover-Effekte betrachtet haben, die auf Farbverläufen basieren. Posten Sie Ihre Erklärung in den Kommentaren!

Hover-Effekte in 3D

Sie denken vielleicht, dass es unmöglich ist, einen 3D-Effekt mit einem einzigen Element zu erzeugen (und ohne auf Pseudo-Elemente zurückzugreifen!), aber CSS hat einen Weg, dies zu ermöglichen.

Was Sie dort sehen, ist kein echter 3D-Effekt, sondern eine perfekte Illusion von 3D im 2D-Raum, die die CSS background, clip-path und transform Eigenschaften kombiniert.

Als Erstes definieren wir unsere Variablen

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Dann erstellen wir einen transparenten Rand mit Breiten, die die obigen Variablen verwenden

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Die Ober- und Rechteckseiten des Elements müssen beide dem Wert von --b entsprechen, während die Unter- und Linkeiten der Summe von --b und --d (was die Variable --_s ist) entsprechen müssen.

Für den zweiten Teil des Tricks müssen wir einen Farbverlauf definieren, der alle zuvor definierten Randbereiche abdeckt. Ein conic-gradient funktioniert dafür

background: conic-gradient(
  at left var(--_s) bottom var(--_s),
  #0000 90deg,var(--c) 0
 ) 
 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Wir fügen einen weiteren Farbverlauf für den dritten Teil des Tricks hinzu. Dieser wird zwei halbtransparente weiße Farbwerte verwenden, die den ersten vorherigen Farbverlauf überlappen, um verschiedene Schattierungen der Hauptfarbe zu erzeugen, was uns die Illusion von Schattierung und Tiefe verleiht.

conic-gradient(
  at left var(--d) bottom var(--d),
  #0000 90deg,
  rgb(255 255 255 / 0.3) 0 225deg,
  rgb(255 255 255 / 0.6) 0
) border-box

Der letzte Schritt ist die Anwendung eines CSS clip-path, um die Ecken für dieses "Long Shadow"-Gefühl abzuschneiden

clip-path: polygon(
  0% var(--d), 
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, 
  0% 100%
)

Das ist alles! Wir haben gerade ein 3D-Rechteck nur mit zwei Farbverläufen und einem clip-path erstellt, das wir einfach mit CSS-Variablen anpassen können. Jetzt müssen wir es nur noch animieren!

Beachten Sie die Koordinaten aus der vorherigen Abbildung (in Rot markiert). Aktualisieren wir diese, um die Animation zu erstellen

clip-path: polygon(
  0% var(--d), /* reverses var(--d) 0% */
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 
  0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Der Trick besteht darin, die unteren und linken Teile des Elements zu verstecken, sodass nur ein rechteckiges Element ohne Tiefe übrig bleibt.

Dieser Pen isoliert den clip-path-Teil der Animation, um zu zeigen, was er tut

Der letzte Schliff besteht darin, das Element mit translate in die entgegengesetzte Richtung zu bewegen – und die Illusion ist perfekt! Hier ist der Effekt mit verschiedenen benutzerdefinierten Eigenschaftswerten für unterschiedliche Tiefen

Der zweite Hover-Effekt folgt derselben Struktur. Alles, was ich getan habe, ist, ein paar Werte zu aktualisieren, um eine Bewegung von links oben anstelle einer von rechts oben zu erzeugen.

Effekte kombinieren!

Das Tolle an allem, was wir behandelt haben, ist, dass sie sich alle ergänzen. Hier ist ein Beispiel, bei dem ich den text-shadow Effekt aus dem zweiten Artikel der Reihe mit der background Animations-Technik aus dem ersten Artikel kombiniere und gleichzeitig den gerade behandelten 3D-Trick verwende

Der tatsächliche Code mag auf den ersten Blick verwirrend sein, aber wenn Sie ihn sich genauer ansehen, werden Sie feststellen, dass es sich lediglich um eine Kombination dieser drei verschiedenen Effekte handelt, die quasi zusammengeschoben wurden.

Lassen Sie mich diesen Artikel mit einem letzten Hover-Effekt beenden, bei dem ich Hintergrund, clip-path und einen Hauch von perspective kombiniere, um einen weiteren 3D-Effekt zu simulieren

Ich habe denselben Effekt auf Bilder angewendet, und das Ergebnis war ziemlich gut, um 3D mit einem einzigen Element zu simulieren

Möchten Sie einen genaueren Blick darauf werfen, wie die letzte Demo funktioniert? Ich habe einen Artikel dazu geschrieben.

Zusammenfassung

Oof, wir sind fertig! Ich weiß, das ist viel schwieriges CSS, aber (1) wir sind auf der richtigen Website dafür, und (2) das Ziel ist es, unser Verständnis verschiedener CSS-Eigenschaften auf ein neues Niveau zu heben, indem wir sie miteinander interagieren lassen.

Sie fragen sich vielleicht, was der nächste Schritt ist, da wir diese kleine Serie fortgeschrittener CSS-Hover-Effekte abschließen. Ich würde sagen, der nächste Schritt ist, alles, was wir gelernt haben, auf andere Elemente anzuwenden, wie Schaltflächen, Menüpunkte, Links usw. Wir haben die Dinge relativ einfach gehalten, indem wir unsere Tricks auf ein Überschriftenelement beschränkt haben, aus genau diesem Grund: Das eigentliche Element spielt keine Rolle. Nehmen Sie die Konzepte und nutzen Sie sie, um Neues zu schaffen, zu experimentieren und zu lernen!