I used to try to clip images using the CSS clip property, but that was so difficult that I typically gave up and got out my image editor. What is the point of spending four hours trying to force an image to clip in CSS when I can do the same thing in Acorn in less than five minutes? But now that clip is deprecated, I don’t have to use it anymore. But better yet, the new CSS <strong>clip-path</strong> property works so much better!
The clip-path property includes features like:
- You can apply it to any element, not just absolutely positioned ones
- You can use SVG to define the clipping path
- It actually works!
That last one is the kicker. Yes, I know the clip property worked too. But it was so hard to use that it might as well have not worked. As I mentioned above, I could spend hours just trying to get the image cropped the way I wanted it to. And I’m not talking about minor adjustments. I’m talking, I would attempt to clip the upper left corner, and the clip property would cut out something in the lower right. WTF?!?
So when I started playing with the CSS clip-path property I didn’t have high hopes. I figured at best it would be a little easier to use. Five minutes later I had clipped exactly the portion of the image I wanted, clipped it in a circle shape (not a rectangle!) and placed that circle on my web page.
CSS hooked me again!
So, since, like the image-set() notation, I thought this was super cool. I decided to create a video for you. The video covers how to create a rectangular clipping path for an image step-by-step. I also give you a tip about a site (Clippy CSS Clip Maker) that will help you create your own clipping paths.