🏀 Balls rolling down a wavy path (CSS only) There's nothing I like more than combining layers of animations to create a pleasing movement. 😊 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

Colorful Spiky Sphere 🦔 1 sphere, 32 spikes, 180 sides, #CSS only. 😎 🔗 Live on @codepen.io: codepen.io/editor/amit_...

Line Shadows - #CSS only. It was a nice challenge getting the movement right and animating the shadow when one line goes over the other, but good shading can add a lot to an animation and make everything look better. 😎 Live on @codepen.io: codepen.io/editor/amit_...

Opened #ReactNext yesterday with my first-ever keynote! 🤯 The audience was amazing, the response was incredible, and the conversations afterward were even better. Huge thanks to the EventHandler team, the speakers, and everyone who joined.

The ghost of a Klein bottle. 👻 Playing with 'animation-composition' in CSS. 🔗 Live on @codepen.io: codepen.io/editor/amit_...

I built a new cat tower, so naturally I rendered it in 3D with pure CSS first. What, don't you do that too? 😄 📷 The finished build (cat included 🐱) is below 👇 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

In a world of AI feeds, recommendation engines, and infinite scroll... I just added RSS to my website. It might not be the newest technology on the internet, but it's still one of the best ways to follow content without algorithms, notifications, or platform lock-in. 🔗 amitsh.com/feed/rss.xml

So last week I built a Strandbeest, and this week's #CodePenChallenge theme is "sand"... Apparently I submitted my entry a week early, and I'd like partial credit retroactively, please. 😄 Hey @codepen.io, a little insider information next time wouldn't hurt. 😏 codepen.io/challenges/2...

Amit Sheen@amitsheen.bsky.social · 2mo ago

👣 CSS Strandbeest This one took a while... Somewhere along the way, this stopped being a CSS experiment and became a trigonometry exercise. 😅 But if there was ever a way to find out what CSS trig functions can do, Jansen's linkage is probably it. 🔗 Live on @codepen.io: codepen.io/editor/amit_...

🐎 Galloping Divs I've made many attempts over the years to create a smooth galloping motion, but with CSS trig functions and @property it's much simpler now. 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

👣 CSS Strandbeest This one took a while... Somewhere along the way, this stopped being a CSS experiment and became a trigonometry exercise. 😅 But if there was ever a way to find out what CSS trig functions can do, Jansen's linkage is probably it. 🔗 Live on @codepen.io: codepen.io/editor/amit_...

So @alhadis.bsky.social suggested I try creating something similar to a caustic reflection, and I figured it was a great opportunity to play around with the new border-shape property. CSS only. Each part is a div with different content. It's a pretty exciting time to be building for the web. 😀 🔗👇

Playing with light. (which means I’m mostly playing with shadows. 🙃) CSS Only. Live demo on @codepen.io: codepen.io/editor/amit_...

Over the past week, I’ve heard many people (including some whose opinions I really respect) claim that Google’s new AI mode might have killed websites. Here’s an unpopular opinion: it didn’t. I wrote about it and shared my thoughts on LinkedIn, and I’d love to hear yours.

Over the past week, since Google announced the new AI mode in its search engine, many people (including some whose opinions I really respect) have claimed that these new features might have killed… | ...

Over the past week, since Google announced the new AI mode in its search engine, many people (including some whose opinions I really respect) have claimed that these new features might have killed web...

linkedin.com

I went through 4 job interviews this week - 2 as the interviewer, 2 as the interviewee. And the difference between the two worlds was... kind of insane. So I wrote about it. Hopefully it’ll be useful to anyone interviewing developers, or anyone struggling with the interview process themselves.

The Two Sides of the Table

I’ve had a crazy week. Sat through four job interviews, two as the interviewer and two as the interviewee.

linkedin.com

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

What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More | CSS-Tricks

Developers have been experimenting with HTML-in-Canvas, a hexagonal world map-analytics feature, a web-based OS for e-ink devices, replacing image sources using the content property, and more. This is...

css-tricks.com

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

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!

frontendmasters.com

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 🙂

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.

css-tricks.com

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.

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.

frontendmasters.com

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!!! 👏

Niels Leenheer@html5test.com · 4mo ago

CSS is DOOMed! I've build DOOM in CSS and every wall, floor, barrel, and imp is a div, positioned in 3D space using CSS transforms. cssdoom.wtf Try it out! But... not every browser can handle it. This is taking the browser to its limit. Chrome has some issues. Safari too. Bugs will be filed.

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.

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 .

media.tenor.com

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