Amit Sheen

✨ Been waiting for this one! ✨

24 layers on the cannon, 64 balls, and not a single inline variable. All powered by sibling-index() and sibling-count().

Working with multiple elements just got way easier! 🤩
(Currently on Chromium only)

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

** This animation is 100% linear! **

Sure, there are spheres, curvy lines, and circular motion. Made with a few #CSS animations and some tricky keyframes. But the timing functions? Pure linear easing across the board.

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

This is the simplest complex animation I’ve ever made (with #CSS). It uses only two animations: a single keyframe to rotate on the Y axis, and another with a simple Y-axis translate. That's it.

The trick is knowing how to combine them in a clever way. 😉

🔗 On @codepen.io: codepen.io/amit_sheen/f...

It's always a good day for some Monty Python. 😂

✨ New article! ✨

A few weeks ago, while brainstorming silly things I could do with Scroll Driven Animations, I suddenly remembered that text can be animated too 🤯. That little spark quickly led me to a new idea: a Scroll-Driven Sticky Heading.

🔗 @css-tricks.com: css-tricks.com/scroll-drive...

Scroll-Driven Sticky Heading | CSS-Tricks I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven an...

Scroll-Driven Sticky Header by @amitsheen.bsky.social

This is a great example of what happens when you start poking at one new CSS feature and wind up combining it with a few others and find fresh new approaches to common patterns.

css-tricks.com/scroll-drive...

Absolutely, this sounds very interesting.
I’d be happy to discuss in private.

Hey Bluesky friends, good news! 📣
Starting next week I’ll be available to take on a new project. Anything frontend that could use a creative touch. Development, consulting, and anything in between.

Happy to chat if you have something interesting.
Shares would be appreciated! 🙏

Cute Shaking Skull ☺️🤝☠️
(CSS only)

Click the skull to shake it. 🥴

Live demo on @codepen.io: codepen.io/amit_sheen/f...

It’s my CodePen Proniversary! 🎉

Celebrating another year as a PRO member on @codepen.io. So much creativity, learning, and endless inspiration from the community. 🤯

Huge thanks to the team for all the work they’ve done (and keep doing) in building and maintaining this amazing platform. 🤗

Thank you!!! 😊
I'll just say it's much easier to be thoughtful and pleasant when you're on the other side... :)

I've been saying for years that Idiocracy is a documentary, just about things that haven't happened yet. But that's okay, they're happening now. 🤦‍♂️

Yes!
Unleash the horses and let's giddy up. 😜

Unbelievable! CSS Master Evans has done it again!
The Backrooms, with pure CSS. Amazing. 🤯

Understanding CSS corner-shape and the Power of the Superellipse The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

Great post on the new CSS corner-shape property from @amitsheen.bsky.social

frontendmasters.com/blog/underst...

Super amazing! 🤩

I'm sorry you weren't able to enjoy the article.
You don't need Canary, just the latest version of Chrome (139+).
I hope this feature will soon receive wider support and then you can come back to the article and enjoy it better.

And special thanks to @nomster.bsky.social for helping with the article and going over the examples. 🙏

✨ New article: Understanding CSS corner-shape and the Power of the Superellipse!

A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+.

🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...

Following his words, @neildegrassetyson.com said that there is a reasonable possibility that extraterrestrials came to Earth, saw what's going on, came to the conclusion that there's no intelligent life on Earth, and left.

May we all have peace and quiet. 🙏

Camtesia is the easiest to use, and my go to for years.

Thanks. I (think I) fixed it.

Cartoon-style illustration of happy business people working outdoors in a city park, surrounded by technology icons, office tools, and playful elements like a duck in a hard hat and flying gadgets.

📣 Bluesky, show me your power...

I'm looking for an a11y expert to review two examples for an article. I've done my best, but need a pro's eyes on them. You'll get full credit and my eternal gratitude, and help thousands of developers see a high-quality, accessible example. DM me.

We're ba-ack! 🎉

Get ready to have some serious fun with CSS!
@kevinpowell.co and I are thrilled to bring back our CSS Games Workshop. 🤩

Want to build awesome games with just CSS? Now's your chance!

Join us: courses.kevinpowell.co/css-games-wo...
(get 25% off for the next 24 hours)

CSS Games Workshop Throughout this interactive workshop, you'll learn the fundamentals of CSS game development, discover how to harness the power of animations, new ways to work with transitions, and unlock the secrets ...

Me and @amitsheen.bsky.social took a year off from this, but it's back and better than ever!

(and 25% off for the next 24 hours)

courses.kevinpowell.co/css-games-wo...

When one needs to disconnect a bit from the surrounding reality, one makes a satisfying endless #CSS animation.

♾️ Infinite wheel ☸️

Live demo @codepen.io: codepen.io/amit_sheen/f...

@kevinpowell.co and @bell.bz are both live, at the same time (in different locations). So instead of choosing, I just put them next to each other. My ADHD is happy to have multiple screens. 😂

One of the side topics of this CSS-packed weekend was undoubtedly Origami. And @ichimnetz.com reminded me that I'd done this... thing (what do you call that?!) a few years ago. (just refactored it now a little to use pure CSS)

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

Just finished my #cssday talk and used a LOT of output elements. It's great!

A #sketchnotes for the talk "Building a Computer with CSS" by @amitsheen.bsky.social‬ at the @cssday.nl #cssday