I ran into a few bugs while working on it, especially with content overflow and during resizing. I think this is a sensitive area that really needs to be solid, since there’s the added complexity of internal vs. external resolution, and the fact that it behaves differently from a regular div.

Great notes, thanks.
I’ll check what I can still fix in the article.

Honestly, while writing it I was so excited that I kept wanting to jump to the next example, so it’s very possible I missed a few things 😅. But I think the core itself is solid and conveys the idea.

That's cool!!! 🤯
maybe you can upload it to the showroom
hicshowroom.com

After spending quite a bit of time playing with the new and amazing HTML-in-Canvas API, I’ve pulled together all the experiments, code, and examples into one long, comprehensive article.

🔗 On @frontendmasters.com: frontendmasters.com/blog/the-web...

* Best viewed in supported browsers.

The Web Is Fun Again: First Experiments with HTML in Canvas An experimental API let's us put HTML within those opening and closing canvas tags and render it to the canvas, while remaining interactive. Lots of possibility here!

This HTML-in-Canvas stuff is pretty wild. Never would I ever have guessed we'd get this on the web.

@amitsheen.bsky.social shows off how it works and many different possibilities.

frontendmasters.com/blog/the-web...

☝️

🔗 Elastic Bulge in the HiC showroom:
hicshowroom.com/showroom.htm...

🔗 Paola’s great article on Codrops:
tympanus.net/codrops/2025...

One of the fun things about playing with the new HTML-in-Canvas API is that it lets me revisit all sorts of cool ideas I’ve seen in the past and wished I could implement on native elements.

Like this one, based on Paola Demichelis article from about a year ago.

(Links 👇)

The Radio State Machine | CSS-Tricks One of the best-known examples of CSS state management is the checkbox hack. What if we want a component to be in one of three, four, or seven modes? That is where the Radio State Machine comes in.

Some of you might be familiar with the “checkbox hack”, but far fewer have heard about the immense power of "The Radio State Machine".

🚀 New article on @css-tricks.com: css-tricks.com/the-radio-st...

If you’ve ever enjoyed bending CSS a little beyond its “intended” use, this one’s for you 🙂

Managing two states in #CSS (a la the Checkbox Hack) is great and all, but using radio buttons for multiple states opens up a bunch more options.

Oodles of examples from @amitsheen.bsky.social:

css-tricks.com/the-radio-st...

Nothing specific. I have to admit that at first it was hard to picture how to use it in practice, but the more I play with it, the more cool ideas come to mind for what I can do with it. It definitely opens the door to some amazing things! 😀

I’m playing with the new HTML-in-Canvas API.

It still feels a bit buggy, and some use cases come across as slightly forced, but it absolutely opens the door to new and exciting possibilities. It basically turns any native element into pixels on a canvas, so the only limit is your imagination. 😉

I see your week, and raise you the past 5 years... 🤪

Built a dynamic puzzle effect in CSS using the new shape() function 🧩

Fully responsive, powered by custom properties, and works with real content.

Want to build one too?
🔗 on @frontendmasters.com: frontendmasters.com/blog/creatin...

Go break it, tweak it, and make something weird 😉

Let’s Get Puzzled! We can make puzzle pieces in CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside.

Let’s Get Puzzled!

We can make puzzle pieces in CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside.

After you win, compare it with the original... 😉

No, but this time it’s real. This time it’s not just an update, it’s a revolution. It changes everything we’ve known until now, and it’s how it should be from now on. This is the future! At least until the next announcement... 😜

Don’t need to win a CSS trophy...
I can just build one myself. 😜

Pure CSS. No judges required. 🤣

Live on @codepen.io: codepen.io/editor/amit_...

@syntax.fm #MarchMadCSS

Or they can bet at Polymarket... 😜
Some people made a lot of money on it.

Amazing!!!
Maybe now people will stop asking me to do it. 🤣

Great work by Niels!!! 👏

a man is sitting at a desk in a cubicle in front of a computer . ALT: a man is sitting at a desk in a cubicle in front of a computer .

Me, after 25 minutes of watching @miocene.io, @chriscoyier.net, @nerdy.dev, and @kevinpowell.co lose their CSS battles. Nothing about the world makes sense anymore.

Did you know you can take an icosahedron, unfold it, flatten it into a 2D shape, and then 'twist' it into a tetrahelix?!

I didn’t know either. But once I discovered it, I had to make a demo, in pure #CSS of course.

Live on @codepen.io: codepen.io/editor/amit_...

And seriously, if you don’t share this feeling, if you manage to work only with developers who love CSS and are willing to learn - I envy you.

But... Yes, in most companies, there are some devs who care and do know CSS, so I suggested a method to bring order to the mess. without trying to educate, without changing paradigms, without complicating.
It’s not for everyone, like anything else. But still - most projects today use z-index.

Again, in most companies, certainly start-ups, and in all the ones I’ve worked at, most of the code is written by FS devs that don’t read CSS-Tricks. They should. Wish they did. In an ideal world, there wouldn’t be a need for z-index, maybe, but people do use it, and it can by a source of chaos.

Teach?! Who said anything about teaching?
You’re still trying to teach FS devs CSS? Do you know any devs actually willing to learn something that isn’t JS or AI? I envy you. You live in a very different world.

Again, I agree. “Using better techniques than fighting someone else's value” is exactly the goal here.

But in many teams, most FS devs can’t even define what the top-layer is. Eliminating z-index isn’t very realistic in that environment.

Bringing some structure to it, is still a big improvement.

I get the intention, and agree that a good understanding of stacking contexts and using the top layer where appropriate can eliminate a lot of unnecessary z-index usage.

That said, avoiding z-index entirely isn’t very realistic... 🙁

So the goal is making it predictable, not pretending it’s gone.

The Value of z-index | CSS-Tricks How we look at the stacking order of our projects, how we choose z-index values, and more importantly, the implications of those choices.

New article! 🚀

Struggling with z-index for modals, tooltips, or toasts? Stop racing for the highest number. I wrote a full guide and made a tiny library to keep it tidy.

Read it on @css-tricks.com: css-tricks.com/the-value-of...

The Value of z-index | CSS-Tricks How we look at the stacking order of our projects, how we choose z-index values, and more importantly, the implications of those choices.

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...

Think you’re looking down a long corridor?!... Think again.

An optical illusion in pure #CSS. 😵
Inspired by the amazing work of @akiyoshikitaoka.bsky.social

Live demo on @codepen.io: codepen.io/editor/amit_...