Ausgefallene Bilddekorationen: Masken und erweiterte Hover-Effekte

Willkommen zu Teil 2 dieser dreiteiligen Serie! Wir dekorieren immer noch Bilder ohne zusätzliche Elemente und Pseudoelemente. Ich hoffe, Sie haben sich bereits die Zeit genommen, das zu verdauen Teil 1 weil wir weiterhin mit vielen Farbverläufen arbeiten werden, um tolle visuelle Effekte zu erzielen. Wir werden auch das CSS einführen mask -Eigenschaft für komplexere Dekorationen und Hover-Effekte.

Kommen wir zum ersten Beispiel, an dem wir gemeinsam arbeiten …

Die Briefmarke

Ob Sie es glauben oder nicht, alles, was Sie brauchen, um einen Briefmarken-CSS-Effekt zu erzielen, sind zwei Farbverläufe und ein Filter:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Wie wir gesehen haben der vorherige Artikel, besteht der erste Schritt darin, mit Platz um das Bild herum zu schaffen padding So können wir einen Hintergrundverlauf zeichnen und ihn dort sehen. Dann verwenden wir eine Kombination aus radial-gradient() und linear-gradient() um diese Kreise um das Bild zu schneiden.

Hier ist eine Schritt-für-Schritt-Darstellung, die zeigt, wie die Farbverläufe konfiguriert werden:

Beachten Sie die Verwendung der round Wert im zweiten Schritt. Es ist sehr wichtig für den Trick, da es sicherstellt, dass die Größe des Farbverlaufs so angepasst wird, dass er an allen Seiten perfekt ausgerichtet ist, unabhängig von der Bildbreite oder -höhe.

Aus die spezifikation: Das Bild wird so oft wiederholt, wie es in den Hintergrundpositionierungsbereich passt. Wenn es ganz oft nicht passt, wird es so skaliert, dass es passt.

Der abgerundete Rahmen

Schauen wir uns eine andere Bilddekoration an, die Kreise verwendet …

Dieses Beispiel verwendet auch a radial-gradient(), aber diesmal habe ich Kreise erstellt um das Bild anstelle des Ausschnittseffekts. Beachten Sie, dass ich auch die verwende round Wert wieder. Der schwierigste Teil hier ist die transparente Lücke zwischen dem Rahmen und dem Bild, wo ich nach dem CSS greife mask Eigentum:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Durch Maskieren können wir den Bereich des Bildes anzeigen – dank der linear-gradient() drin - sowie 20px um jede Seite davon – dank der conic-gradient()dem „Vermischten Geschmack“. Seine 20px ist nichts als die Variable --s die die Größe des Rahmens definiert. Mit anderen Worten, wir müssen die Lücke verstecken.

Folgendes meine ich:

Der lineare Verlauf ist der blaue Teil des Hintergrunds, während der konische Verlauf der rote Teil des Hintergrunds ist. Diesen transparenten Teil zwischen beiden Farbverläufen schneiden wir aus unserem Element heraus, um die Illusion einer inneren transparenten Grenze zu erzeugen.

Die innere transparente Grenze

In diesem Fall werden wir keinen Rahmen erstellen, sondern etwas anderes ausprobieren. Wir werden eine transparente innere Grenze schaffen innerhalb unser Bild. Wahrscheinlich nicht so nützlich in einem realen Szenario, aber es ist eine gute Übung mit CSS-Masken.

Ähnlich wie im vorherigen Beispiel werden wir uns auf zwei Farbverläufe verlassen: a linear-gradient() für den inneren Teil und a conic-gradient() für den äußeren Teil. Wir lassen einen Abstand zwischen ihnen, um den transparenten Randeffekt zu erzeugen.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Sie haben vielleicht bemerkt, dass der konische Gradient in diesem Beispiel eine andere Syntax als im vorherigen Beispiel hat. Beide sollen die gleiche Form erzeugen, also warum sind sie unterschiedlich? Das liegt daran, dass wir dasselbe Ergebnis mit unterschiedlichen Syntaxen erreichen können. Das mag auf den ersten Blick verwirrend aussehen, ist aber ein gutes Feature. Sie sind nicht verpflichtet zu finden Lösung, um eine bestimmte Form zu erreichen. Sie müssen nur eine Lösung finden, die für Sie aus den vielen Möglichkeiten da draußen funktioniert.

Hier sind vier Möglichkeiten, das äußere Quadrat mit Farbverläufen zu erstellen:

Es gibt noch mehr Möglichkeiten, dies durchzuziehen, aber Sie verstehen, worauf es ankommt.

Es gibt keinen Best™-Ansatz. Ich persönlich versuche, den mit dem kleinsten und am besten optimierten Code zu finden. Für mich ist jede Lösung am besten geeignet, die weniger Gradienten, weniger Berechnungen und weniger wiederholte Werte erfordert. Manchmal wähle ich eine ausführlichere Syntax, weil sie mir mehr Flexibilität gibt, Variablen zu ändern und Dinge zu modifizieren. Es kommt mit Erfahrung und Übung. Je mehr Sie mit Farbverläufen spielen, desto besser wissen Sie, welche Syntax wann zu verwenden ist.

Kehren wir zu unserer inneren transparenten Grenze zurück und untersuchen den Hover-Effekt. Falls Sie es nicht bemerkt haben, es gibt einen coolen Hover-Effekt, der diesen transparenten Rand mit a bewegt font-size Trick. Die Idee ist, die zu definieren --d Variable mit einem Wert von 1em. Diese Variable steuert den Abstand des Randes von der Kante. Wir können so umwandeln:

--_d: calc(var(--d) + var(--s) * 1em)

…was uns das folgende aktualisierte CSS gibt:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

Das font-size ist zunächst gleich 0 ,damit 1em ist auch gleich 0 und --_d gleich sein --d. Beim Schweben jedoch die font-size gleich einem durch an definierten Wert ist --o Variable, die den Versatz der Grenze festlegt. Dies wiederum aktualisiert die --_d Variable, die den Rand um den Offset verschiebt. Dann füge ich eine weitere Variable hinzu, --s, um das Zeichen zu steuern, das entscheidet, ob sich die Grenze nach innen oder außen bewegt.

Das font-size trick ist wirklich nützlich, wenn wir Eigenschaften animieren möchten, die ansonsten nicht animierbar sind. Benutzerdefinierte Eigenschaften definiert mit @property kann das aber lösen Unterstützung dafür fehlt zum Zeitpunkt des Schreibens noch.

Die Rahmenenthüllung

Wir haben im ersten Teil dieser Serie die folgende Enthüllungsanimation erstellt:

Wir können die gleiche Idee übernehmen, aber anstelle eines Rahmens mit einer Volltonfarbe verwenden wir einen Farbverlauf wie diesen:

Wenn Sie beide Codes vergleichen, werden Sie die folgenden Änderungen feststellen:

1. Ich habe die gleiche Verlaufskonfiguration aus dem ersten Beispiel in der verwendet mask Eigentum. Ich habe einfach die Farbverläufe von verschoben background Eigentum an der mask Eigentum.
2. Ich habe a hinzugefügt repeating-linear-gradient() um den Gradientenrand zu erstellen.

Das ist es! Ich habe den größten Teil des gleichen Codes, den wir bereits gesehen haben, wiederverwendet – mit superkleinen Änderungen – und eine weitere coole Bilddekoration mit einem Hover-Effekt erhalten.

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

Versuchen wir es mit einer anderen Frame-Animation. Dieser ist ein bisschen knifflig, da er einen hat dreistufige Animation:

Der erste Schritt der Animation besteht darin, den unteren Rand zu vergrößern. Dazu passen wir die an background-size einer linear-gradient():

Sie fragen sich wahrscheinlich, warum ich auch die Oberkante hinzufüge. Wir brauchen es für den dritten Schritt. Ich versuche immer, den Code, den ich schreibe, zu optimieren, also verwende ich einen Verlauf, um sowohl die Ober- als auch die Unterseite abzudecken, aber der obere wird ausgeblendet und später mit einem sichtbar gemacht mask.

Für den zweiten Schritt fügen wir einen zweiten Farbverlauf hinzu, um die linken und rechten Kanten anzuzeigen. Aber dieses Mal machen wir es mit background-position:

Wir können hier aufhören, da wir bereits einen schönen Effekt mit zwei Farbverläufen haben, aber wir sind hier, um die Grenzen zu erweitern, also fügen wir einen Hauch von Maske hinzu, um den dritten Schritt zu erreichen.

Der Trick besteht darin, die Oberkante auszublenden, bis wir die Unterseite und die Seiten zeigen, und dann aktualisieren wir die mask-size (oder mask-position), um den oberen Teil anzuzeigen. Wie ich bereits sagte, können wir viele Gradientenkonfigurationen finden, um den gleichen Effekt zu erzielen.

Hier ist eine Illustration der Farbverläufe, die ich verwenden werde:

Ich verwende zwei konische Farbverläufe mit einer Breite von gleich 200%. Beide Farbverläufe decken den Bereich ab und lassen nur den oberen Teil unbedeckt (dieser Teil wird später unsichtbar sein). Beim Schweben schiebe ich beide Farbverläufe, um diesen Teil abzudecken.

Hier ist eine bessere Darstellung eines der Farbverläufe, um Ihnen eine bessere Vorstellung davon zu geben, was passiert:

Jetzt legen wir dies in die mask Eigentum und wir sind fertig! Hier ist der vollständige Code:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

Ich habe auch einige Variablen eingeführt, um den Code zu optimieren, aber Sie sollten sich im Moment daran gewöhnt haben.

Wie wäre es mit einer vierstufigen Animation? Ja es ist möglich!

Keine Erklärung dafür, denn es ist Ihre Hausaufgabe! Nehmen Sie alles, was Sie in diesem Artikel gelernt haben, um den Code zu analysieren, und versuchen Sie zu artikulieren, was er tut. Die Logik ist allen vorherigen Beispielen ähnlich. Der Schlüssel liegt darin, jeden Farbverlauf zu isolieren, um jeden Schritt der Animation zu verstehen. Ich habe den Code nicht optimiert, um die Lesbarkeit zu verbessern. Ich habe eine optimierte Version Wenn Sie interessiert sind, können Sie aber auch versuchen, den Code selbst zu optimieren und ihn mit meiner Version zur zusätzlichen Übung zu vergleichen.

Wrapping up

Das war es für Teil 2 dieser dreiteiligen Serie über kreative Bilddekorationen nur mit der Element. Wir haben jetzt einen guten Überblick darüber, wie Farbverläufe und Masken kombiniert werden können, um fantastische visuelle Effekte und sogar Animationen zu erstellen – ohne nach zusätzlichen Elementen oder Pseudoelementen zu greifen. Ja, eine Single Etikett reicht!

Wir haben noch einen weiteren Artikel in dieser Serie vor uns. Bis dahin ist hier eine Bonus-Demo mit einem coolen Hover-Effekt, den ich verwende mask ein kaputtes Bild zusammenzusetzen.