Lightnews — Scholar-powered news

Amit Sheen

@amitsheen.bsky.social

430 followers 120 following 59 posts

Experienced web developer, specializing in design systems, animation, and creative coding. Passionate about pushing CSS to its limits. Posts (mostly) front-of-the-frontend stuff and animations. Don't follow people who post or share about politics.

Posts Media Videos Starter Packs

Pinned

Amit Sheen @amitsheen.bsky.social · Aug 6

🚨 New Course Alert 🚨
DevTools for Beginners

@kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS.

🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co

9 34

Amit Sheen @amitsheen.bsky.social · 15d

I'm sorry, didn’t mean for it to sound like Chrome was the only one driving this. I only highlighted the Chrome update as a signal that the feature is starting to gain traction. I’ve adjusted the article, hope it reads better now.

Amit Sheen @amitsheen.bsky.social · 16d

True, but it still was not very usable. It is still not practical to use it in production, but I am really happy to see it starting to get implemented.

Amit Sheen @amitsheen.bsky.social · 18d

Great work!

And yes, I did. 😜
The rotation is nice, but it's old (about 4 years ago), it uses scss, animates the clip-path, and it's very heavy and slow. Not my best code. Maybe I need to redo it with modern CSS...

🔗 codepen.io/amit_sheen/p...

Amit Sheen @amitsheen.bsky.social · 19d

Playing with angles is fun! 😀
I'm here if you want to figure out the math together.

1 1

Amit Sheen @amitsheen.bsky.social · 19d

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

3 5 40

Amit Sheen @amitsheen.bsky.social · 21d

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

3 21 68

Reposted by Amit Sheen

CSS-Tricks* @css-tricks.bsky.social · 21d

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

CSS Typed Arithmetic | CSS-Tricks

Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.

css-tricks.com

3 16

Amit Sheen @amitsheen.bsky.social · 26d

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

1 10

Reposted by Amit Sheen

Brecht De Ruyte @utilitybend.com · Sep 12

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

Styling siblings with CSS has never been easier. Experimenting with sibling-count and sibling-index | utilitybend

Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.

utilitybend.com

1 27 130

Amit Sheen @amitsheen.bsky.social · Sep 5

Start with two colors, and add a new color between any two existing ones. You can drag colors around, adjust the HSL, copy it, and delete any color you don't want.

That way you can begin a palette with only two colors and then expand and refine it as needed.

🔗 codepen.io/amit_sheen/f...

HSL color palette

...

codepen.io

Amit Sheen @amitsheen.bsky.social · Sep 5

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

1 1

Reposted by Amit Sheen

Chris Coyier @chriscoyier.net · Sep 3

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)

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.

frontendmasters.com

1 1 14

Amit Sheen @amitsheen.bsky.social · Sep 3

Thank you! I gained so much insight while writing this, and it was both challenging and rewarding to find a way to explain things in a clear and approachable manner.

Amit Sheen @amitsheen.bsky.social · Aug 30

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

1 5

Reposted by Amit Sheen

Frontend Masters @frontendmasters.com · Aug 30

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.

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.

frontendmasters.com

1 3

Amit Sheen @amitsheen.bsky.social · Aug 28

✨ 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()`.

frontendmasters.com

1 3

Reposted by Amit Sheen

Frontend Masters @frontendmasters.com · Aug 28

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()`.

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()`.

frontendmasters.com

1 2

Amit Sheen @amitsheen.bsky.social · Aug 22

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

1 6

Reposted by Amit Sheen

CSS-Tricks* @css-tricks.bsky.social · Aug 22

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

1 8

Amit Sheen @amitsheen.bsky.social · Aug 20

Wow! They look amazing.
Great work. 🤯

Amit Sheen @amitsheen.bsky.social · Aug 20

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

2 5 25

Reposted by Amit Sheen

CSS-Tricks* @css-tricks.bsky.social · Aug 20

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

3D Layered Text: Motion and Variations | CSS-Tricks

In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole...

css-tricks.com

2 5

Amit Sheen @amitsheen.bsky.social · Aug 18

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

2 10

Reposted by Amit Sheen

CSS-Tricks* @css-tricks.bsky.social · Aug 18

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

3 24

Amit Sheen @amitsheen.bsky.social · Aug 17

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)

1 1 51