Einige Links zu CSS Verläufen

Von Zeit zu Zeit scheint sich der Zeitgeist des Bloggens um ein bestimmtes Thema zu kristallisieren, und es ist, als würden die gespeicherten Artikel in meinem Lesezeichenordner ein Gespräch führen. Das Gespräch, das dort gerade stattfindet, dreht sich alles um CSS-Verläufe, und ich dachte, ich verlinke einige der interessanteren Stücke.

• Tag 22: konische Verläufe — Manuel Matuzovic hat sich am 21. Tag seiner 100-Tage-Serie über modernes CSS mit konischen Verläufen beschäftigt und einen schönen Überblick über Farben, Winkel, Platzierung und Farbstopps gegeben. Dann, am Tag 22, setzt er sie für das ::backdrop Pseudo-Element ein. (Übrigens hat Twitter unerwartet seinen Account gesperrt – lasst uns helfen, das wieder in Ordnung zu bringen, wenn wir können.)
• Verstehst du CSS-Radialverläufe wirklich? — Patrick Brosset hat hier eine führende Arbeit geleistet und ich arbeite mich ehrlich gesagt immer noch durch. Aber ich schätze bereits seine klaren Erklärungen und Demos von Dingen, die ich immer noch vermassele, wie Schlüsselwörter für die Größe und Form eines radialen Verlaufs. Ich verlinke das bereits in unserem eigenen CSS-Verlaufshandbuch!
• Hochgradig anpassbare Hintergrundverläufe — Apropos radiale Verläufe, Scott Vandeheys Rezept für einen mit mehreren Farbstopps ging letzte Woche viral. Seine Herausforderung war es, ein Verlaufsmuster zu erstellen, das verschiedene Farbvarianten unterstützen könnte, was normalerweise ein heilloses Durcheinander von CSS-Klassen und Farbwerten für jede Variante wäre, wenn nicht benutzerdefinierte Eigenschaften verwendet würden. Auf diese Weise kann er eine benutzerdefinierte Eigenschaft für die verschiedenen Farben und Platzierungswerte für jeden Farbstopp zuweisen und dann einfach die Werte je nach Kontext aktualisieren. Und was noch wichtiger ist, die Art und Weise, wie benutzerdefinierte Eigenschaften mit JavaScript aktualisiert werden können, ermöglichte es Scott, ein Werkzeug zur Anpassung seines Verlaufsmusters zu erstellen, das am Ende des Beitrags großzügig geteilt wird.
• CSS-Halbtonmuster — Michelle Barker mit einer detaillierten Aufschlüsselung von Ana Tadors „Halbton“-Mustern. Der Effekt ähnelt dem gepunkteten Tintenaufdruck alter Zeitungen. Während Ana Houdini im Hintergrund für Animationen und Hover-Effekte verwendet, konzentriert sich Michelle speziell auf den Halbton-Effekt selbst und wie er mit einem radialen Verlauf konstruiert wird. Ich liebe besonders die Art und Weise, wie Michelle zeigt, wie man von einem geradlinigen Punktgitter zu einem gelangt, bei dem das Muster leicht versetzt ist. Und bleibt bis zum Ende dran, um zu sehen, wie sie den Effekt mit einem mask-image abschließt, das einen linearen Verlauf verwendet, um einen Verblassungseffekt zu erzeugen. Ich habe mit diesem Muster auch etwas herumgespielt und bin zu etwas Neatem gelangt, das wie ein verlaufender Tintenklecksfilter aussieht.
• Eine flotte Navbar-Lösung — Eric Meyer erhielt eine interessante Design-Herausforderung für ein Menü, bei dem eine gepunktete Linie vom Link „aktuelle Seite“ ausgeht und Teil eines größeren gepunkteten Rahmens am linken Rand des Inhaltscontainers wird. Eric ist immer ein großartiges Beispiel dafür, wie man wie ein Front-End-Entwickler denkt, und das tut er hier, indem er den alternativen Weg beschreibt, den er mit einem linearen Verlauf nahm, als er auf ein Problem mit dem Standardansatz, border-style: dotted auf das Element anzuwenden, stieß.
• Maskierte Verlaufs-Bindestrichlinien — Eric mit einer Fortsetzung des letzten Links, der zeigt, wie er nicht nur die Bindestriche eines linken Rahmens mit den Bindestrichen eines Rasterbildes verbunden hat, sondern wie sein pedantisches Designauge ihn davon überzeugt hat, seine Lösung zu ändern, um die geringere Auflösung der Bindestriche des Bildes mit zwei sich wiederholenden linearen Hintergrundverläufen als mask-image auf dem Hintergrundverlauf nachzuahmen. So nerdy und großartig!