Ausgefallene Bilddekorationen: Umrisse und komplexe Animationen

Wir haben die letzten beiden Artikel dieser dreiteiligen Serie damit verbracht, mit Farbverläufen zu spielen, um wirklich hübsche Bilddekorationen mit nichts anderem als dem zu erstellen Element. In diesem dritten und letzten Stück werden wir weitere Techniken mit CSS untersuchen outline Eigentum. Das mag seltsam klingen, weil wir im Allgemeinen verwenden outline eine einfache Linie um ein Element zu ziehen – so ähnlich border Es kann jedoch nur alle vier Seiten gleichzeitig zeichnen und ist nicht Teil des Box-Modells.

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

Beginnen wir mit unserem ersten Beispiel – einem Overlay, das beim Hover 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 selbst herausfordern nicht in dieser Serie zu tun. Stattdessen können wir zum CSS greifen outline Eigenschaft und Hebelwirkung, dass es einen negativen Offset haben und sein 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 zu erstellen outline das so dick wie die halbe Bildgröße ist, dann versetzen Sie es um die halbe Bildgröße mit einem negativen Wert. Fügen Sie etwas Halbtransparenz mit der Farbe hinzu und wir haben unser Overlay!

Der Rest ist, was passiert :hover. Wir aktualisieren die outline und der Übergang zwischen beiden Umrissen erzeugt den coolen Hover-Effekt. Die gleiche Technik kann auch verwendet werden, um einen Fading-Effekt zu erzeugen, wo wir uns nicht bewegen outline aber mach es transparent.

Anstatt die Hälfte der Bildgröße in diesem zu verwenden, verwende ich eine sehr große outline Dickenwert (100vmax) beim Anwenden einer CSS-Maske. Damit ist es nicht mehr nötig, die Bildgröße zu kennen – der Trick funktioniert bei allen Größen!

Bei der Verwendung können Probleme auftreten 100vmax als großer Wert in Safari. Wenn dies der Fall ist, erwägen Sie den vorherigen Trick, bei dem Sie die ersetzen 100vmax mit halber Bildgröße.

Wir können noch weiter gehen! Zum Beispiel statt einfach das extra zu clippen outline, können wir Formen erstellen und eine ausgefallene Enthüllungsanimation anwenden.

Cool oder? Das outline ist, was die gelbe Überlagerung erzeugt. Das clip-path Clips das Extra outline um die Sternform zu bekommen. Dann machen wir beim Hover die Farbe transparent.

Oh, du willst stattdessen Herzen? Das können wir auf jeden Fall!

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

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

Ich weiß, die Animation ist ein bisschen fehlerhaft. Dies ist eher eine Demo zur Veranschaulichung der Idee als das „Endprodukt“, das in einer Produktionsstätte verwendet werden soll. Wir möchten die Dinge für einen natürlicheren Übergang optimieren.

Hier ist eine Demo, die verwendet mask stattdessen. Es ist der, mit dem ich dich am Ende gehänselt habe der letzte Artikel:

Wussten Sie, dass die outline Eigentum war zu so viel Großartigkeit fähig? Fügen Sie es Ihrer Toolbox für ausgefallene Bilddekorationen hinzu!

Kombinieren Sie alle Dinge!

Nachdem wir nun viele Tricks mit Farbverläufen, Masken, Ausschnitten und Umrissen 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 demonstrieren, sondern zu demonstrieren, wie flexibel und modular diese Ansätze sind.

Wenn Sie diese Demos zum ersten Mal sehen, könnten Sie davon ausgehen, dass ein Haufen zusätzlicher Divs-Wrapper und Pseudo-Elemente verwendet werden, um sie durchzuziehen. Aber alles passiert direkt auf der Element. Es ist der einzige Selektor, den wir brauchen, um diese erweiterten Formen und Effekte zu erhalten!

Wrapping up

Nun, meine Güte, danke, dass du in den letzten Wochen mit mir in dieser dreiteiligen Serie rumgehangen hast. Wir haben eine Reihe verschiedener Techniken untersucht, die einfache Bilder in etwas Auffälliges und Interaktives verwandeln. Werden Sie alles verwenden, was wir behandelt haben? Sicherlich nicht! Aber ich hoffe, dass dies eine gute Übung für Sie war, um sich mit fortgeschrittenen Verwendungen von CSS-Funktionen wie Farbverläufen zu befassen. mask, clip-path und outline.

Und wir haben alles mit nur einem gemacht Element! Keine zusätzlichen div-Wrapper und Pseudo-Elemente. Sicher, es ist eine Einschränkung, die wir uns selbst auferlegt haben, aber es hat uns auch dazu gebracht, CSS zu erforschen und zu versuchen, innovative Lösungen für häufige Anwendungsfälle zu finden. Bevor Sie also zusätzliches Markup in Ihren HTML-Code pumpen, überlegen Sie, ob CSS bereits in der Lage ist, diese Aufgabe zu bewältigen.