HTML-in-Canvas, Hex Maps, E-ink Optimization — oh my! All that and more in @dxnny.fun's latest What's !important, featuring: @amitsheen.bsky.social @benschwarz.bsky.social @scrwd.mastodon.social.ap.brid.gy and @wil.to css-tricks.com/whats-import...

📢 Big update… Looks like I’ll be adding a new title to my bio soon: *Keynote Speaker* 🤯 I’m honored (and honestly, pretty excited) to share that I’ve been selected to deliver the opening keynote at ReactNext 2026, the best and largest frontend conference in Israel. [1/2]

Want to turn your content into a rainy puddle? Just wrap it with a `<rain-drops>` web component... and wait for support. 😐 In the meantime, if you’re on a supported browser, you can check out the live component in the HiC showroom: hicshowroom.com/showroom.htm...

*Two* of my articles made it into the latest issue of Frontend Focus (@frontendfocus.bsky.social), which is, first of all, an honor, and second, it reminded me that I haven’t shared my article on “Building a UI Without Breakpoints” yet... (👇)

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.

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

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 👇)

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

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

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.

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

Amazing!!! Maybe now people will stop asking me to do it. 🤣 Great work by Niels!!! 👏

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

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

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

I’m excited to share that my session from CSS Day is now live on YouTube 🎥 Ever wondered what a CPU is actually built of? And if it's possible to build one using only #CSS? If so, I think you’ll enjoy it. 👍 Would love to hear your thoughts! 😀 🔗 www.youtube.com/watch?v=PFqt...

In case you missed it yesterday, here's @amitsheen.bsky.social building a computer with CSS. www.youtube.com/watch?v=PFqt...

I’m trying to turn my TV into a full-on 3D portal. This is phase one, what do you think? 😎 No, it is not AI. Yes, it’s all done with #CSS perspective.

📣 New Article: 📣 Rethinking “Pixel Perfect” a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world. 🔗 www.smashingmagazine.com/2026/01/reth... @smashingmagazine.com

Oh yes! I’m going to use this so much!!!

📢 New article! Beyond the Mouse: Animating with Mobile Accelerometers If you want to make mobile interfaces feel more alive, I would love for you to take a look. 🔗 frontendmasters.com/blog/beyond-... * For the full experience, I highly recommend reading it on a mobile device. @frontendmasters.com

Kicking off 2026 with WebXR experiments! 🚀 🏀 btw, a year ago I was playing with 2D hand tracking via the webcam and projecting it into 3D using CSS. Now I am waiting for a more solid implementation of the WebXR DOM Overlays Module so I can start layering some CSS on top of it too. 🤣

Playing with triangles to create mesh deformation in pure #CSS. Live demo @codepen.io: codepen.io/amit_sheen/f...

Turn any profile picture into a stunning piece of art. Upload your image, adjust the slider, and download your new picture. Enjoy. 😃 🔗 Live on @codepen.io: codepen.io/amit_sheen/f...

I saw a few folks posting their FizzBuzz solutions, so I figured I’d make my own pure #CSS version. (No markup) 🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

📣 New article on @frontendmasters.com about a visual problem that bugged me for years: making a card that truly feels deep. frontendmasters.com/blog/the-dee... Would love your thoughts.

Inspired by Temani’s brilliant work, where he created a box using only `border-radius` and `corner-shape`, I built on his code, played with different angles, and came up with this dynamic demo. Live demo on @codepen.io: codepen.io/amit_sheen/f...

✨ New article ✨ Are we at the start of a new era? Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS. What do you think? css-tricks.com/css-typed-ar...

You know how we can’t calc() numbers with mixed data types? Well, that's changing (Chrome 140) and it might be a bigger deal that @amitsheen.bsky.social describes as "self-aware” CSS. css-tricks.com/css-typed-ar...

I was inspired by another amazing animation from Jon Kantner, so I made a pure CSS version. 400 squares, using sibling-index() and sibling-count(), a bunch of trig functions, and some typed arithmetic. (Currently works in Chrome 140+ only) Live demo on @codepen.io: codepen.io/amit_sheen/f...

🚀The new CSS sibling-index() and sibling-count() functions let us create staggered animations, dynamic color palettes, and even complex circular layouts with ease. I wrote about my first experiments with these fantastic new CSS additions. So much fun! ♥️ ✨ #CSS utilitybend.com/blog/styling...

A couple of days ago I came across Jon Kantner’s excellent color palette generator, and it reminded me that a few years back I built something quite similar (great minds and all that) back when HSL was the hot new thing. (Links in comment 👇)

Big fan of the educational demos in @amitsheen.bsky.social's post here about `offset-path`. frontendmasters.com/blog/the-pat...

✨ The `-path` of Least Resistance (part 2) ✨ From shapes that define boundaries to paths that drive motion. We shift to `offset-path`, where elements no longer get clipped but flow along custom routes. 🤩 🔗 Read and share your thoughts on @frontendmasters.com: frontendmasters.com/blog/the-pat...

The `-path` of Least Resistance (Part 2) This time we're looking at offset-path (and friends), which can be used to create movement when animated and benefits from all the same fancy functions that we learned about with clip-path.

✨ New article: The `-Path` of Least Resistance ✨ First part of a series on the power of paths in CSS, kicking off with clip-path. From the basics to functions and syntax, all the way to advanced shape logic. 🔗 Read and share your thoughts on @frontendmasters.com frontendmasters.com/blog/the-pat...

The `-path` of Least Resistance (Part 1) A deep dive into `clip-path` from Amit Sheen, a very powerful tool in shape creation on the web, particularly now with `shape()`.

✨ Part three (and final) is out now! ✨ This series has been a deep dive into 3D layered text, and in this part we explore some advanced interactions while making the code cleaner and more dynamic with a touch of JS. 🤩 🔗 Read and share your thoughts on @css-tricks.com css-tricks.com/3d-layered-t...

Alright, we're capping off @amitsheen.bsky.social's CSS-Tricks takeover with the final chapter in his series — this time making fully responsive bulging text that follows your mouse in real time. ✨ css-tricks.com/3d-layered-t...

✨ 3D layered text - Part two is here! ✨ If this series of articles were a meal, this part would definitely be the main course. 😋 19(!) live examples of 3D text animations, and if you want to build them yourself, check it out on @css-tricks.com. 🔗 css-tricks.com/3d-layered-t...

It's still the @amitsheen.bsky.social show over here at CSS-Tricks! Now up: the second piece of his series about 3D text effects... this time with ✨ motion ✨. css-tricks.com/3d-layered-t...

✨ New article! ✨ This time it’s a three-part exploration of 3D layered text. 😎 The first part is all about the basics, from the very first line to text with real depth that feels like it pops off the page. 🤩 Check it out and share your thoughts on @css-tricks.com: 🔗 css-tricks.com/3d-layered-t...

Alright, we're letting @amitsheen.bsky.social take over CSS-Tricks... all week! He's got a three-parter that's a super deep dive into 3D layered text. Part one is all about creating an index of layers for adding depth, and it's full of goodies. css-tricks.com/3d-layered-t...

I'm just loving the fact that we can now create such complex interactions with only a few simple lines of CSS. 🤯 (This demo is from an upcoming article I’m working on)

📣 The State of CSS 2025 results are live! There are some really interesting findings this year! 🤯 And if the Conclusion feels like a love letter to the future of CSS, well… guilty as charged. 😉 🔗 2025.stateofcss.com

Does the new `stretch` keyword in CSS mark the end of `box-sizing: border-box;` in our reset files? 🤔