Fancy Image Decorations: Umrandungen und komplexe Animationen

Wir haben uns in den letzten beiden Artikeln dieser dreiteiligen Serie mit Verläufen beschäftigt, um wirklich nette Bilddekorationen nur mit dem <img>-Element zu erstellen. In diesem dritten und letzten Teil werden wir weitere Techniken mit der CSS-Eigenschaft outline erkunden. Das mag seltsam klingen, denn normalerweise verwenden wir outline, um eine einfache Linie um ein Element zu zeichnen – ähnlich wie border, aber es kann nur alle vier Seiten gleichzeitig zeichnen und ist kein Teil des Box-Modells.

Wir können damit jedoch mehr machen, und das möchte ich in diesem Artikel experimentieren.

Beginnen wir mit unserem ersten Beispiel – einer Überlagerung, die beim Hovern mit einer coolen Animation verschwindet

Wir könnten dies erreichen, indem wir ein zusätzliches Element über dem Bild hinzufügen, aber das ist es, was wir uns in dieser Serie nicht antun wollen. Stattdessen können wir die CSS-Eigenschaft outline verwenden und davon profitieren, dass sie einen negativen Offset haben und sich mit ihrem Element überlappen kann.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

Der Trick besteht darin, eine outline zu erstellen, die so dick ist wie die halbe Bildgröße, und sie dann mit einem negativen Wert um die halbe Bildgröße zu versetzen. Fügen Sie mit der Farbe etwas Halbtransparenz hinzu und wir haben unsere Überlagerung!

Der Rest ist, was beim :hover passiert. Wir aktualisieren die outline und der Übergang zwischen beiden Umrandungen erzeugt den coolen Hover-Effekt. Die gleiche Technik kann auch verwendet werden, um einen Verblassungseffekt zu erzielen, bei dem wir die outline nicht bewegen, sondern sie transparent machen.

Anstatt die halbe Bildgröße zu verwenden, verwende ich hier einen sehr großen Wert für die outline-Dicke (100vmax) und wende eine CSS-Maske an. Damit muss die Bildgröße nicht mehr bekannt sein – der Trick funktioniert in allen Größen!

Sie könnten Probleme mit der Verwendung von 100vmax als großen Wert in Safari haben. Wenn dies der Fall ist, sollten Sie den vorherigen Trick in Betracht ziehen, bei dem Sie 100vmax durch die halbe Bildgröße ersetzen.

Wir können die Dinge noch weiter treiben! Anstatt die zusätzliche outline einfach nur zuzuschneiden, können wir Formen erstellen und eine schicke Aufdeckanimation anwenden.

Cool, oder? Die outline erstellt die gelbe Überlagerung. Der clip-path schneidet die zusätzliche outline zu, um die Sternform zu erhalten. Dann machen wir beim Hovern die Farbe transparent.

Oh, du willst stattdessen Herzen? Das können wir natürlich machen!

Stellen Sie sich all die möglichen Kombinationen vor, die wir erstellen können. Alles, was wir tun müssen, ist, eine Form mit einer CSS-Maske und/oder clip-path zu zeichnen und sie mit dem outline-Trick zu kombinieren. Eine Lösung, unendliche Möglichkeiten!

Und ja, wir können das definitiv auch animieren. Vergessen wir nicht, dass clip-path animierbar ist und mask auf Verläufen basiert – etwas, das wir in den ersten beiden Artikeln dieser Serie sehr detailliert behandelt haben.

Ich weiß, die Animation ist etwas ruckelig. Das ist eher eine Demo, um die Idee zu veranschaulichen, als ein "Endprodukt" für eine Produktionsseite. Wir müssten die Dinge für einen natürlicheren Übergang optimieren.

Hier ist eine Demo, die stattdessen mask verwendet. Es ist die, mit der ich Sie am Ende des letzten Artikels neugierig gemacht habe

Wussten Sie, dass die Eigenschaft outline so viel Genialität zu bieten hat? Fügen Sie sie Ihrer Werkzeugkiste für schicke Bilddekorationen hinzu!

Kombiniere alles!

Nachdem wir nun viele Tricks mit Verläufen, Masken, Clipping und Outlines gelernt haben, ist es Zeit für das große Finale. Lassen Sie uns diese Serie abschließen, indem wir alles kombinieren, was wir in den letzten Wochen gelernt haben, um nicht nur die Techniken zu präsentieren, sondern auch zu demonstrieren, wie flexibel und modular diese Ansätze sind.

Wenn Sie diese Demos zum ersten Mal sehen, könnten Sie annehmen, dass viele zusätzliche div-Wrapper und Pseudo-Elemente verwendet werden, um sie zu realisieren. Aber alles geschieht direkt auf dem <img>-Element. Es ist der einzige Selektor, den wir für diese erweiterten Formen und Effekte benötigen!

Zusammenfassung

Nun, vielen Dank, dass Sie die letzten Wochen mit mir in dieser dreiteiligen Serie verbracht haben. Wir haben eine Fülle verschiedener Techniken erforscht, die einfache Bilder in etwas Auffälliges und Interaktives verwandeln. Werden Sie alles verwenden, was wir behandelt haben? Sicherlich nicht! Aber meine Hoffnung ist, dass dies eine gute Übung für Sie war, sich mit fortgeschrittenen CSS-Funktionen wie Verläufen, mask, clip-path und outline auseinanderzusetzen.

Und das alles haben wir mit nur einem <img>-Element gemacht! Keine zusätzlichen div-Wrapper und Pseudo-Elemente. Sicher, es ist eine Einschränkung, die wir uns selbst auferlegt haben, aber sie hat uns auch dazu gebracht, CSS zu erforschen und innovative Lösungen für gängige Anwendungsfälle zu finden. Überlegen Sie also, bevor Sie zusätzlichen Markup in Ihr HTML pumpen, ob CSS die Aufgabe bereits bewältigen kann.

Weitere schicke Effekte für Bilder finden Sie auf meiner CSS Tip Webseite. Hier sind ein paar Beispiele

• Ein Reveal-Hover-Effekt mit einem einzigen Element
• 3D-Parallax-Effekt auf Bildern
• Färben Sie Ihr Bild mit einem gleitenden Hover-Effekt