Category: CSS

Clip Your Images with CSS clip-path

Posted on by Jennifer Kyrnin

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 clip-path 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!

. . .

So Excited about image-set() Notation!

Posted on by Jennifer Kyrnin

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

. . .
Posted in CSS