On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns.
At least that’s what I thought while staring at …
Say you have a line in SVG:
<svg<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" /</svgYou can use the stroke-dasharray property in CSS to make dashes:
line {
stroke-dasharray: 5;
}That 5 value is a relative unit based …
The browser has long been a medium for art and design. From Lynn Fisher’s joyful A Single Div creations to Diana Smith’s staggeringly detailed CSS paintings, wildly creative, highly skilled developers have — over the years — continuously pushed …
You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed …
For those who have missed the big news, Firefox now supports conic gradients!
Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true…
Creating is the most intense excitement one can come to know.
—Anni Albers, On Designing
I recently wrote a post — that was shared here on CSS-Tricks — where I looked at ways to use Unicode characters to …
curates well-designed patterns
Indeed it does!
Bonus: Lisbon Azulejos is full of lovely patterns created by Mathieu Grac based on tiles from the city of Lisbon. It has interesting UI to explore them. …
These aren’t particularly hard to web search for, but just in case you didn’t know they existed I figured I’d drop them here. I’ve used all three of these in the past and I think they do a good job …
