#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. 🥳
Live on @codepen https://codepen.io/thebabydino/pen/RwXvryZ
#CSS #pattern #gradient #cssPattern #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
This isn't always ideal because the end rows & columns of dots always stick to the edge, which leads to ugly gaps if the dots are big + the viewport is small.
Those boxes not having dimensions that are a multiple of the background-size box ones doesn't look that good either.
So... how to improve?
#CSS #code #coding #frontend #web #dev #webDev #webDevelopment #cssGradient
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
#CSS #Maths #mathematics #cssMaths #cssPattern #pattern #cssGradient #code #web #dev #webDev #webDevelopment #coding #frontend #cssHack
@anatudor Hmmm... sounds like `background-repeat` needs to get the `space-between` vs `space-around` vs `space-evenly` keywords from layout alignment.
https://drafts.csswg.org/css-align-3/#distribution-values
(The existing `space` keyword matches the `space-between` behaviour in the more nuanced options.)
@anatudor @JaneOri This is super cool! I wish I could have used something like it for the 2023 @Typographics website, which does some similar unitization for background patterns (rendered with web fonts!) and internal container boxes.
I couldn’t figure out a reliable CSS solution but @pixelambacht helped with a minimal JS-aided solution:
https://typo.social/@nicksherman/110028680089466500
Attached: 1 image … For anyone curious why I was asking about CSS techniques for snapping the height of elements to multiples of a number, you can see what I wanted it for on the new @Typographics website we just launched yesterday: https://2023.typographics.com Getting all the seams of boxes for content to responsively snap to match repeating ornament patterns is oddly satisfying. Unfortunately there isn’t any good CSS option for this (yet), but @pixelambacht helped out with a minimal JavaScript solution.
Ana Tudor 🐯
Amelia Bellamy-Royds
Lea Verou, PhD
Nick Sherman