Clipping, Clipping, and More Clipping!

The magical use of CSS clip-path attribute: Explore a variety of creative techniques and application cases. This article will share a series of interesting effects achieved using clip-path attribute, hoping to inspire you to apply it in your project or make creative attempts.

This is the third article about clip-path published by the author on CSS-Tricks. If you want to know the background, you can first read the following article:

• Create interactive effects using CSS clip-path
• Create interactive effects using CSS clip-path , Part 2

This article will introduce new ideas!

Creative One: Double cut

A clever trick is to use clip-path multiple times to crop content. This may sound obvious, but in fact few people use this concept.

For example, let's look at an expanded menu:

clip-path can only be applied once to a single DOM node. A node cannot have multiple active instances of the same CSS rules at the same time, which means that each instance has only one clip-path . However, there is no upper limit on the number of times a combined crop node is combined. For example, we can cut a<div> Placed in another cropped<code><div> Inside, and so on. In the ancestral relationship of the DOM node, we can apply as many independent crops. This is exactly what is done in the above demonstration. I have one cropped node fill another cropped node. The parent node acts as the boundary, and the child nodes fill the parent node when scaling. This produces an unusual effect of a rounded menu. Think of it as an advanced method of <code>overflow: hidden .

Of course, you can think that SVG is more suitable for this purpose. Compared with clip-path , SVG can achieve more functions. This includes smooth zoom. If clip-path fully supports the Bezier curve, the situation will be different. But at the time of writing, that's not the case. Anyway, clip-path is very convenient. With a node, a CSS rule, you can start. As far as the above demonstration is concerned, clip-path does the job and is therefore a viable option.

I made a short video to explain how the menu works internally:

Creative Two: Scale Clipping Path

Another (less obvious) trick is to use clip-path for scaling. We can actually use CSS transition to animate clip-path !

The transition system is amazing in how it is built. In my opinion, its addition is one of the biggest leaps in the development of Web technology in recent years. It supports transitions of various values. clip-path is an acceptable value that we can animation. Animation usually means interpolation between two extreme values. For clip-path , this means interpolation between two completely different paths. This is where the fine animation system of the web shows its advantages. It works not only for single values, but also for animated value sets.

When animating clip-path , each coordinate is interpolated separately . This is very important. It makes clip-path animation look coherent and smooth.

Let's take a look at the demo. Click on the image to restart the effect:

In this demo, I used clip-path transition. It is used to scale from one clip-path covering a small area to another huge clip-path . The minimum version of clip-path is much smaller than the resolution—in other words, it is not visible to the naked eye when applied. The other extreme value is slightly larger than the viewport. At this zoom level, there is no visible cropping, as all cropping occurs outside the visible area. Animating between these two different clip-path will have interesting effects. The cropped shape appears to show what's behind it when scaled.

You may have noticed that this demo uses different shapes. In this case, I used the logo of the popular sneaker brand. This gives you an idea of ​​how it works in a more realistic scenario.

Similarly, here is a video that explains the technical details in detail:

Creative Three: Crop overlay

Another idea is to create highlighting effects using clip-path . For example, suppose we want to use clip-path to create the active state of a menu.

The clipping path above extends between different menu options when animates. Additionally, we used an interesting shape to make the UI stand out.

This demo uses a modified copy of the same content, where the copy is located at the top of the existing content. It is in the exact same position as the menu unit and is used as the active state. Essentially, it looks like any other regular activity state of the menu. The difference is that it is created using clip-path instead of using fancy CSS styles on HTML elements.

Use clip-path to create some unusual effects here. The slanted shape is one aspect, but we also get the stretching effect. The menu has two independent crops—one on the left and one on the right—which allows the crop to be animated at different times using transition delays. The result is a very relaxed stretch animation. Since the default easing is nonlinear, delays can lead to a slight rubber band effect.

The second trick here is to apply delays according to direction. If the active state needs to move to the right, the right side needs to start the animation first and vice versa. I get direction awareness by using a little JavaScript to apply the correct class based on clicks.

Creative Four: Slice Slicing

How often do you see circularly expanding menus on the web? Ridiculous, right! ? Well, clip-path not only makes it possible, it's quite simple.

The menus we usually see contain links arranged in single-line or even drop-down menus, just like the first trick we've seen before. What we do here is put these links in arcs instead of rectangles. Of course, using rectangles is the traditional way. The idea here is to explore more mobile-friendly interactions and keep two specific UX principles in mind:

• A clear goal, easy to click with your thumb
• Changes occur near focus – where your visual focus is

This demonstration is not specifically aimed at clip-path . I just happened to use clip-path to create the pen. Again, like the previous expandable menu demo, this is a handy question. Using clip-path and 50% border radius, I immediately got the required arc.

Creative Five: Toggle Button

The toggle button always wows web developers like us. It seems like a new toggle button explanation will be introduced every week. OK, this is mine:

This demo is a remake of Dribbble screenshot by Oleg Frolov. It combines all three techniques described in this article. These are:

• Double cut
• Scaling clip path
• Crop overlays

All of these switches seem to have one thing in common. They consist of an oval background and a circle, similar to a real mechanical switch. The way this toggle button works is to enlarge the circular clip-path inside the circular container. The container trims the content through overflow: hidden , that is, double crops.

Another key part of the demo is the use of two alternating versions in the tag. They are original versions and their yin-yang inversion mirrored copies. Using two versions instead of one version is, taking the risk of repetition, a convenient problem. With both versions, we just need to create a transition for the first version. We can then repeat most of this for the second version. At the end of the transition, the toggle button switches to the opposite version. Since the inverted version is the same as the previous end state, changes cannot be found. The advantage of this technique is to reuse parts of the animation. The disadvantage is that there will be stutter when the animation is interrupted. This happens when the user presses the toggle button before the animation is complete.

Let's take a look behind the scenes again:

Conclusion

You might think: Exploration is one thing, but what about production? Can I use clip-path on the website I am currently working on? Is it ready to go into production?

Well, there is no easy answer to this question. Among other things, there are two more issues that need to be carefully studied:

1. Browser support
2. performance

At the time of writing, about 93% of browsers support it according to caniuse. I think we are on the verge of mass adoption. Note that this number takes into account the WebKit prefix.

There is also the argument from IE, but that is really not an argument to me. I can't see what the extra effort for IE means. Should you create workarounds for unsafe browsers? Your users are better off using a modern browser. Of course, there are some rare situations that need to be considered legacy. But in these cases, you may not consider using modern CSS at all.

So what about performance? Well, as things get more and more, the performance gets tricky, but I won't say anything will stop us from using clip-path today. Performance that is always measured is important. On average, clip-path may have a greater performance impact than other CSS rules. But remember that the practice we are introducing here is advice, not law. Think of them as suggestions. Develop the habit of measuring performance.

Go ahead and cut your page into pieces. See what happens!