Minimal pure #CSS textile patterns on @codepen https://codepen.io/thebabydino/full/OJmpzya
Absolutely no images other than CSS gradients and they are all tiny! All of them are under 500 bytes minified, some of them well under!
Recent searches
Search options
#csspattern
0 posts0 participants0 posts today
Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
I have a new article out: 
Pure CSS Halftone Effect in Only 3 Declarations https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 
cooler, more interesting patterns.
frontendmasters.comPure CSS Halftone Effect in 3 Declarations – Frontend Masters BoostA halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!
Replied in thread
We make the background-size fit an integer number of times within the viewport width and height.
We need length division for that, so we use the tan(atan2()) hack by @JaneOri.
Then, we set box dimensions/ margins to be multiples of background-size https://www.reddit.com/r/css/comments/1gp4cq0/comment/lwqkyrd/
Really cool thing is it works well on zoom, see it on @codepen
https://codepen.io/thebabydino/pen/ZEgwBqL
GIF
#tinyCSStip Want your page background to contain an integer number of dots?
Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 
GIF
Continued thread
The fifth is a pure #CSS text effect.
https://codepen.io/thebabydino/pen/XWQQRWG
No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.
Unfortunately broken in Firefox due to an old bug 
https://bugzilla.mozilla.org/show_bug.cgi?id=1481498
Replied in thread
A couple more such halftone patterns, both of which have a video of me coding them from scratch.
https://codepen.io/thebabydino/pen/LYyNVJQ https://codepen.io/thebabydino/pen/xxYMOoQ
Came across this cool #CSS pattern https://codepen.io/josetxu/pen/mdvzaQZ?editors=0100 - uses 35 gradients, so I instantly knew I could simplify it and make it easily customisable.
So here it is my version on #CodePen https://codepen.io/thebabydino/pen/WNPamBB?editors=0100 - 9 gradients with n set to 4. Because yes, you can change n! 
