The Cicada Principle, revisited with CSS variables
Publikováno: 5.8.2020
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
The main idea is simple: You write your main rule using CSS variables, and then use
:nth-of-*()rules to set these variables to something different every N items. If you use enough variables, and choose your Ns for them to be prime numbers, you reach a good appearance of pseudo-randomness with relatively small Ns.
The update to the trick is that … Read article “The Cicada Principle, revisited with CSS variables”
The post The Cicada Principle, revisited with CSS variables appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
The main idea is simple: You write your main rule using CSS variables, and then use
:nth-of-*()rules to set these variables to something different every N items. If you use enough variables, and choose your Ns for them to be prime numbers, you reach a good appearance of pseudo-randomness with relatively small Ns.
The update to the trick is that she doesn’t update the whole block of code for each of the selectors, it’s just one part of the clipping path that gets updated via a custom property.
Lea’s post has more trickery using the same concepts.
Direct Link to Article — Permalink
The post The Cicada Principle, revisited with CSS variables appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.