Years ago, creating CSS shapes was a tedious task. I had to find workarounds with a lot of gradients and math.
Now, using the shape() function, I can easily create complex shapes and animate them! 👇
It's on! 🔥
A crap-ton of shape() inspiration from none other than @css-only.dev to help burn your Thursday.
css-tricks.com/complex-css-...
Has CSS gone too far?
Front-End Fools: Top 10 April Fools’ UI Pranks of All Time
A little trip down memory lane. :)
css-tricks.com/front-end-ap...
The specification smells a little funny, but we've already implemented emulation for it.
LOL, some of the best tech exists but os never truly surfaced!
Introducing the CSS Olfactive API
Something's s little... smelly about it. 👃
css-tricks.com/css-olfactiv...
Rounding up recent things that are worth having on your radar:
💥 SVG favicons and color scheme (@pawelgrzybek.com)
💥 Help shape @mixin (@lea.verou.me)
💥 Anchor-interpolated morphing (@chriscoyier.net)
💥 corner-shape UI elements (@utilitybend.com)
...and more:
css-tricks.com/whats-import...
💥 Firefox 149 and Safari 26.4 now allow for querying the @container name only. That way, we have an identifier without necessarily needing to query the container type.
developer.mozilla.org/en-US/docs/M...
developer.apple.com/documentatio...
The actual spec change:
github.com/w3c/csswg-dr...
No spicy takes here, just genuine interest and notes on whatever the heck "Generative UI" is supposed to be.
css-tricks.com/generative-u...
Hey, spread the word: last week our pals over at @css-tricks.com published the entire JavaScript for Everyone lesson on destructuring.
These are some my personal favorite syntaxes, which are — and I simply cannot stress this point enough — very normal and in fact _cool_ things to feel ways about!
So, corner-shape can be animated. Notice the added sprinkle of color-contrast().
css-tricks.com/experimentin...
🔥 Another week of "ain't no time for all that" nicely reported by @dxnny.fun.
css-tricks.com/whats-import...
If you've been on the fence about @piccalil.li's JavaScript for Everyone course, first off: be like Nike and just do it.
We've published an excerpt from it about destructuring by none other than @wil.to to give you just a taste.
css-tricks.com/javascript-f...
Always working on the CSS-Tricks Almanac...
New entries covering scroll-driven animations (and a dash of view transitions)!
⭐️scroll-timeline-name: css-tricks.com/almanac/prop...
⭐️view-timeline-axis: css-tricks.com/almanac/prop...
⭐️timeline-scope: css-tricks.com/almanac/prop...
🔥 Chrome 146 becomes the first browser to ship scroll-triggered animations.
developer.chrome.com/release-note...
A vertical column of folders with labels on the right fanned out and curving towards the right.
Nice cards fanned out in a subtle arc.
Circular options with icons around another circular item in the center with a star icon.
Curious about custom <select>?
I wrote about some of my recent demos over at @css-tricks.com!
Take a look ✨ css-tricks.com/abusing-cust...
A few wild examples of the customizable select have been floating around. Here are a few more from @patrickbrosset.com that push the envelope.
css-tricks.com/abusing-cust...
Aren't z-index values one of those things we all sorta struggle with? How we choose them, how we manage them, how we balance the stacking contexts, etc.
@amitsheen.bsky.social has a great way to approach it... all around tokens for intentional intentional layers.
css-tricks.com/the-value-of...
How many ways can you select <html> in CSS? @dxnny.fun says “challenge accepted” building off an exercise @css-only.dev did a little while back.
css-tricks.com/the-differen...
css-tip.com/root-selecto...
A little gem @monknow.bsky.social stumbled into when working on something... we can center an absolutely positioned element with justify-self:
.element {
position: absolute;
place-self: center;
inset: 0;
}
He explains it nicely here:
css-tricks.com/yet-another-...
A Complete Guide to Bookmarklets, by @vale.rocks (@csstricks@mastodon.social):
css-tricks.com/a-complete-guide-to-book...
#guides #bookmarklets #javascript #linklists
An Exploit... in CSS?!
Lee Meyer's sane, thoroughly reported, and well-grokked explanation of the recent CVE-2026-2441 vulnerability that was labeled a "CSS exploit" that "allowed a remote attacker to execute arbitrary code inside a sandbox via a crafted HTML page."
css-tricks.com/an-exploit-i...
Firefox 148 makes shape() available without a flag, aligning with Chrome and Safari:
developer.mozilla.org/en-US/docs/M...
All the magazines are saying it. Bookmarklets are so in right now.
You may consider them obsolete in the face of shinier tools, but they prove themselves a solid, stable staple of any developer's toolbox.
Fast, stable, time-proven. What isn't to love?
#WebDev #FrontEndDevelopment
Making your own bookmarklets doesn't have to be all that difficult, and @vale.rocks shows you how, step-by-step.
css-tricks.com/a-complete-g...
SVG or raster? The short answer to that question is: there’s almost no difference at all if you are working on something very small and specific.
But it's more nuanced than that, and @holasvg.com has all the nerdy details you need.
css-tricks.com/loading-smar...
Here's @dxnny.fun poking at a new proposal that would allow an element to match an element when the pointer gets :near() it by a certain amount.
css-tricks.com/potentially-...
A few recent additions to the ol' Almanac to distract you on this lovely Friday:
❋ The sign() function
css-tricks.com/almanac/func...
❋ The progress() function
css-tricks.com/almanac/func...
❋ The abs() Function
css-tricks.com/almanac/func...
That progress() one... just wild.
