Clipping, Clipping, and More Clipping!

css-tricks.com css-tricks.com3 years ago in #Dev Love331

There are so many things you can do with clipping paths. I’ve been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with the CSS clip-path property. Hopefully, you’ll either put them to use on your projects or play around and have fun with them. Before we dive in, it’s worth mentioning that this is my third post here on CSS-Tricks about clip paths. You might want to check those out for a little background: This article is full of new ideas! Idea 1: The Double Clip One neat trick is to use clipping paths to cut content many times. It might sound obvious, but I haven’t seen many people using this concept. For example, let’s look at an expanding menu: See the Pen The more menu by Mikael Ainalem (@ainalem)on CodePen. Clipping can only be applied to a DOM node once. A node cannot have several active instances of the same CSS rule, so that means one clip-path per instance. Yet, there is no upper limit for how many times you can combine clipped nodes. We can, for example, place a clipped <div> inside another clipped <div> and so on. In the ancestry of DOM nodes, we can apply as many separate cuts as we want. That’s exactly what I did in the demo above. I let a clipped node fill out another clipped node. The parent acts as a boundary, which the child fills up while zooming in. This creates an unusual effect where a rounded menu appears. Think of it as an advanced method of overflow: hidden. You can, of course, argue that SVGs are better suited for this purpose. Compared to clipping paths, SVG is capable of doing a lot more. Among other things, SVG provides smooth scaling. If clipping fully supported Bézier curves, the conversation would be different. This is not the case at the time of writing. Regardless, clipping paths are very convenient. One node, one CSS rule and you’re good to go. As far as the demo above is concerned, clipping paths do a good job and thus are a viable option. I put together short video that explains the inner workings of the menu: Idea 2: Zooming Clip Paths Another (less obvious) trick is to use clipping paths for zooming. We can actually use CSS transitions to animate clipping paths! The transition system is quite astonishing in how it’s built. In my opinion, its addition to the web is one of the biggest leaps that the web has taken in recent years. It supports transitions between a whole range of different values. Clipping paths are among the accepted values we can animate. Animation, in general, means interpolation between two extremes. For clipping, this translates to an interpolation between two complete, different paths. Here’s where the web’s refined animation system shows its strength. It doesn’t only work with single values — it also works when animating sets of values. When animating clipping paths specifically, each coordinate gets interpolated separately. This is important. It makes clipping path animations look coherent and smooth. Let’s look at the demo. Click on an image to restart the effect: See the Pen Brand cut zoom by Mikael Ainalem (@ainalem)on CodePen. I’m using clip-path transitions in this demo. It’s used to zoom in from one clipping path covering a tiny region going into another huge one. The smallest version of the clipping path is much smaller than…

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply