Menu

📰
0

What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More

CSS-Tricks·@DanielSchwarz·2 months ago
#nmbz0T
Reading 0:00
15s threshold

For this issue of **What’s !important**, we have a healthy balance of old CSS that you might’ve missed and *new* CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, customizable , :open, scroll-triggered animations, , and somehow, more. Let’s dig in. ### Understanding random() and random-item() Alvaro Montoro explains how the random() and random-item() CSS functions work. As it turns out, they’re actually quite complex: width: random(--w element-shared, 1rem, 2rem); color: random-item(--c, red, orange, yellow, darkkhaki); ### Creating folded corners using clip-path My first solution to folded corners involved actual images. Not a *great* solution, but that was the way to do it in the noughties.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More