Einerseits ist es einfach, einfache Schachbrettmuster mit CSS zu erstellen. Andererseits, es sei denn, wir sind einer der CSS-Gradient-Ninjas, sind wir irgendwie auf einfache Muster beschränkt.
Zumindest dachte ich das, als ich auf … starrte.
Nehmen wir an, Sie haben eine Linie in SVG
<svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svgSie können die stroke-dasharray -Eigenschaft in CSS verwenden, um Striche zu erzeugen
line {
stroke-dasharray: 5;
}Der Wert 5 ist eine relative Einheit, basierend auf ...
Der Browser ist seit langem ein Medium für Kunst und Design. Von Lynn Fishers fröhlichen A Single Div-Kreationen bis hin zu Dianas Smiths atemberaubend detaillierten CSS-Gemälden, hochtalentierte Entwickler haben über die Jahre hinweg ...
Sie können Streifen in CSS erstellen. Das war lange Zeit alles, was ich mir in Bezug auf CSS-Hintergrundmuster vorgestellt habe. An Streifen ist nichts falsch; Streifen sind cool. Sie können zu breiten und schmalen Bändern, überkreuzten ...
Für alle, die die großen Neuigkeiten verpasst haben: Firefox unterstützt jetzt Conic Gradients!
Beginnend mit Firefox 75, veröffentlicht am 7. April, können wir zu about:config gehen, nach dem Flag layout.css.conic-gradient.enabled suchen und dessen Wert auf true setzen …
Schaffen ist die intensivste Aufregung, die man kennen kann.
—Anni Albers, On Designing
Ich habe kürzlich einen Beitrag geschrieben – der hier auf CSS-Tricks geteilt wurde –, in dem ich mir Möglichkeiten angesehen habe, Unicode-Zeichen zu ...
kuratiert gut gestaltete Muster
Tatsächlich tut es das!
Bonus: Lisbon Azulejos ist voller schöner Muster, die von Mathieu Grac basierend auf Kacheln aus der Stadt Lissabon erstellt wurden. Es hat eine interessante Benutzeroberfläche, um sie zu erkunden. …
Diese sind nicht besonders schwer im Web zu finden, aber nur für den Fall, dass Sie nicht wussten, dass sie existieren, dachte ich, ich lasse sie hier. Ich habe alle drei in der Vergangenheit verwendet und denke, sie machen eine gute Arbeit ...
