Tuesday, 4 August 2020

The Cicada Principle, revisited with CSS variables

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 ArticlePermalink


The post The Cicada Principle, revisited with CSS variables appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



from CSS-Tricks https://ift.tt/2CenfTX
via IFTTT

No comments:

Post a Comment

Passkeys: What the Heck and Why?

These things called  passkeys  sure are making the rounds these days. They were a main attraction at  W3C TPAC 2022 , gained support in  Saf...