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

We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie. I’ll make the point in this demo. Resize those […]

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

We’ll get into layered content, clip-path, and the :has() selector to build a responsive slider with live videos. We can do it by hand, but a few SCSS loops will help make it more manageable.

The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we’ll expand on some existing ideas, improving them by not requiring any content duplication.

Let’s look at a cool animated nav effect (from a recent post by Emil Kowalski) that uses CSS `clip-path` to move the highlighted nav item around. It’s an interesting look at this CSS feature and adds a lot of polish to a simple idea.