Einige Links zu CSS -Gradienten

In letzter Zeit scheint die Blogosphäre dem Thema des CSS -Gradienten besondere Aufmerksamkeit zu schenken, und die entsprechenden Artikel in meinen Lesezeichen sind lebhaft geworden. Ich nutzte zufällig diese Gelegenheit, um einige interessante Links zu Artikeln zu organisieren und zu teilen.

• Conic Gradienten -Manuel Matuzovic führte an Tag 21 in seiner 100-Tage-modernen CSS-Serie Konic-Gradienten ein und erklärte leicht verständliche Weise wie Farbe, Winkel, Position und Farbstopppunkte. Am 22. Tag wandte er es wieder auf die ::backdrop Pseudoelement. (Übrigens hat Twitter sein Konto versehentlich verboten - wenn möglich, lasst uns ihm helfen, es gemeinsam wiederherzustellen.)
• Verstehst du den CSS -Radialgradienten wirklich? -Dieser Artikel von Patrick Brosset ist eine Arbeit auf dem Leitfaden, und ich studiere ihn immer noch sorgfältig. Aber ich habe seine klaren Erklärungen und Demonstrationen geschätzt, die meine langjährige Verwirrung über radiale Gradientengröße und Form von Schlüsselwörtern beantwortet haben. Ich habe diesen Beitrag mit unserem eigenen CSS -Gradientenführer verlinkt!
• hoch anpassbarer Hintergrundgradienten -Apropos radialen Gradienten, das radiale Gradientenschema von mehrfarbigen Stopps von Scott Vandehey in der vergangenen Woche wurde weit verbreitet. Seine Herausforderung besteht darin, ein Gradientenmuster zu erstellen, das unterschiedliche Farbvariationen unterstützt. Dies wäre ein Chaos, wenn Sie keine benutzerdefinierten Eigenschaften verwenden. In der Regel müssen Sie für jede Variation eine große Anzahl von CSS -Klassen und Farbwerten erstellen. Auf diese Weise kann er den verschiedenen Farben und den Positionswerten jedes Farbstopppunkts eine benutzerdefinierte Eigenschaft zuweisen und diese Werte dann einfach gemäß dem Kontext aktualisieren. Noch wichtiger ist, dass benutzerdefinierte Eigenschaften über JavaScript aktualisiert werden können, sodass Scott ein Tool für benutzerdefinierte Gradientenmuster erstellen und das Tool am Ende des Artikels großzügig freigeben kann.
• CSS -Halbtonmuster - Michelle Barker hat eine detaillierte Aufschlüsselung des "Halftone" -Musters von Ana Tudor vorgenommen. Dieser Effekt ist ein bisschen wie ein Dot-in-Tintendruck in altmodischen Zeitungen. Während Ana Houdini für Animation und Schwebeffekte unten verwendet, konzentriert sich Michelle speziell auf den Halbton -Effekt selbst und wie er mit Radialgradienten gebaut wird. Mir gefällt besonders die Art und Weise, wie Michelle zeigt, wie man von einer einfachen Punktmatrix zu einer leicht gestaffelten Punktmatrix übergeht. Der Artikel endet auch mit der Verwendung, wie lineare Gradienten als Maskenbild verwendet werden, um einen Fade -Effekt zu erzeugen. Ich habe auch dieses Muster ausprobiert und hatte einige interessante Effekte, die wie ein verschwommener Tintenfilter aussahen.
• Eine schöne Navigationsleiste -Lösung - Eric Meyer steht vor einer interessanten Herausforderung des Menüdesigns, die eine gepunktete Linie aus dem Link "Aktuelle Seite" erfordert und Teil des größeren gepunkteten Randes am linken Rand des Inhaltsbehälters wird. Eric ist immer ein großartiges Beispiel dafür, wie man wie ein Front-End-Entwickler denkt, und er tut dies hier, da er die Alternative beschreibt, die er nimmt, wenn er Hindernisse begegnet, wenn er die Standardmethode der Elementeinstellung border-style: dotted verwendet-mit linearen Gradienten.
• gestrichelte Linien mit Maskengradienten - Eric ergänzte den vorherigen Beitrag, indem nicht nur angezeigt wird, wie die gepunktete Linie des linken Randes mit der gepunkteten Linie des Rasterbildes angeschlossen werden kann, sondern auch, wie er sein Design mit zwei wiederholten linearen Hintergrundgradienten als maskierte Bilder der Hintergrundgradienten perfektionierte.wunderbar!

Das obige ist der detaillierte Inhalt vonEinige Links zu CSS -Gradienten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!