Einige Links zu CSS-Verläufen

Hin und wieder scheint sich der bloggende Zeitgeist um ein bestimmtes Thema zu versammeln und es ist, als würden sich die gespeicherten Artikel in meinem Lesezeichenordner unterhalten. Das Gespräch, das jetzt dort sitzt, dreht sich alles um CSS-Verläufe, und ich dachte, ich verlinke einige der interessanteren Stücke.

• Tag 22: konische Gradienten — Manuel Matuzovic hat sich an Tag 21 seiner 100-tägigen Serie über modernes CSS mit konischen Farbverläufen befasst und einen netten Überblick über Farben, Winkel, Platzierung und Farbstopps gegeben. Dann weiter Tag 22, er setzt es auf die ::backdrop Pseudo-Element. (Twitter übrigens unerwartet sein Konto gesperrt – lasst uns helfen, das Schiff zu reparieren, wenn wir können.)
• Verstehst du CSS-Radialgradienten wirklich? - Patrick Brosset hat hier führerwürdige Arbeit geleistet und ich arbeite mich ehrlich gesagt immer noch durch. Aber ich schätze schon jetzt 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 Farbverlaufs. Ich verlinke das schon in unserem eigenen Leitfaden für CSS-Verläufe!
• Hochgradig anpassbare Hintergrundverläufe — Apropos radialer Gradient, Scott Vandehey's Rezept für einen mit mehreren Farbstopps machte letzte Woche die Runde. Seine Herausforderung bestand darin, ein Verlaufsmuster zu erstellen, das verschiedene Farbvariationen unterstützen kann, was normalerweise ein heißes Durcheinander von CSS-Klassen und Farbwerten für jede Variation wäre, wenn es nicht verwendet würde benutzerdefinierte Eigenschaften. Auf diese Weise kann er den verschiedenen Farben und Platzierungswerten für jeden Farbstopp eine benutzerdefinierte Eigenschaft zuweisen und die Werte dann einfach je nach Kontext aktualisieren. Darüber hinaus ermöglichte es Scott die Art und Weise, wie benutzerdefinierte Eigenschaften mit JavaScript aktualisiert werden können Erstellen Sie ein Tool zum Anpassen seines Verlaufsmusters, die am Ende des Beitrags großzügig geteilt wird.
• CSS-Halbtonmuster - Michelle Bärker mit einer detaillierten Aufschlüsselung der „Halbton“-Muster von Ana Tudor. Der Effekt ist so etwas wie der gepunktete Tintendruck alter Schulzeitungen. Während Ana verwendet Houdini Unter der Haube für Animations- und Hover-Effekte betrachtet Michelle speziell den Halbtoneffekt selbst und wie er mit einem radialen Farbverlauf aufgebaut ist. Ich mag besonders die Art und Weise, wie Michelle zeigt, wie man von einem einfachen Punktraster zu einem Raster mit leicht versetzten Mustern kommt. Und bleiben Sie bis zum Ende dran, um zu sehen, wie sie den Effekt mit a unterstreicht mask-image die einen linearen Farbverlauf verwendet, um einen Fading-Effekt zu erzeugen. Ich habe mit diesem Muster ein bisschen herumgespielt, auch, und endete mit etwas Ordentlichem, das wie ein laufender Tintenklecksfilter aussieht.
• Eine schneidige Navbar-Lösung — Eric Meyer erhielt eine interessante Designherausforderung für ein Menü, bei dem eine gepunktete Linie aus dem Link „Aktuelle Seite“ hervorgeht 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 Frontend-Entwickler denkt, und er tut es hier, während er die alternative Route beschreibt, die er mit einem linearen Gradienten genommen hat, als er mit dem Standardansatz des Setzens auf einen Haken stieß border-style: dotted auf dem Element.
• Maskierte gestrichelte Linien mit Farbverlauf – Eric mit einem Follow-up zu diesem letzten Link, das nicht nur zeigt, wie er die Striche eines linken Rands mit den Strichen eines Rasterbilds verband, sondern auch, wie sein scharfsinniges Designauge ihn davon überzeugte, seine Lösung zu ändern, um die niedrigere Auflösung des zu imitieren Striche des Bildes mit zwei sich wiederholenden linearen Hintergrundverläufen als mask-image auf dem Hintergrundverlauf. So nerdig und großartig!