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!
. . .
As I’ve been writing my next book on forgotten features of CSS, I have been coming across some really cool things. It’s been hard to keep up the writing as I get so excited about actually using the features that CSS provides. Today I was working on image-set() and in doing my testing I realized that my dual monitor setup was well equipped for testing this tool.
What is Image-Set()?
You’re probably asking what the heck image-set() even is as it isn’t used very often and most designers don’t know much about it. In a nutshell: it is a CSS notation that allows you to define multiple image sources based on the resolution of those sources. The most common usage is for providing a Retina image and a non-Retina image. This way Retina devices see a crisp clean image, and non-Retina devices can show an image that is (hopefully) smaller and better optimized for their viewing.
How to Use Image-Set()
. . .