Amit Sheen

Mousing over an element and watching it tilt in 3D space is a beautiful and compelling effect. Let’s bring it to mobile and use the phone itself rather than a cursor.

What if you could make a card like a 3D portal, with layers of depth? You probably should just click to see, it’s a very compelling look.

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.

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

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.

We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.

“…nobody thinks they’re writing bad code while they’re doing it. That’s the trap.”

These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides.

Setting text on a circle in CSS isn’t straightforward, but it is possible with some effort. This technique splits text into segments and uses transforms and perspective to pull it off.