Amit Sheen

This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.

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.

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.