clip-path property but will probably still work indefinitely in all browsers for the purpose of backwards compatibility.You’ve probably heard of CSS’s clip property. It has some unique features and syntax, and in this post I’ll outline how it’s used.
At the end of the post you’ll find a link to a demo page where some photos are used to animate the clip property, just to visually demonstrate what this property does.
Syntax
The syntax for clip looks like this:
.example {
position: absolute;
clip: rect(110px, 160px, 170px, 60px);
}
The first thing you should know about clip is that it can be applied to an element only if the element is absolutely positioned (i.e., set to position: absolute or position: fixed; thanks to Gunnar in the comments for clarifying this). I’m not entirely sure why this is the case. I assume there are reasons. It is quite a big drawback, but regardless, this can be an interesting property to experiment with.
The next part of the syntax is the actual clip property itself. The value can be either a defined shape, or “auto”. A value of “auto” has no clipping, and is the default for all elements. So using clip: auto is the same as not including clip at all.
If you define a shape (currently only rectangles are allowed), you do so with the “rect()” function, passing in values that define the shape. The values can be positive or negative values.
The rect() Values
The values passed into rect() are a tad confusing at first, but once you fiddle with them, they’re not difficult to work with. Basically the values represent top, right, bottom, and left, in that order — just like other CSS properties like margin and padding. The values define the offsets from the top of the element and from the left of the element.
In other words, in the example above, the first value places an imaginary line running horizontally 110px from the top (the first value) and another horizontal line 170px from the top (the third value). The second value places an imaginary vertical line 160px from the left, and the last value places another imaginary vertical line 60px from the left.
If that confuses you, maybe this image will help:
This image uses Photoshop-like “guides” to show you where the respective values will place the imaginary intersecting lines. The bright area of the image is the part of the image that would be visible. The rest would be hidden. So the “clipped” area defined by the intersecting lines is the area that remains.
You can think of clipping kind of like adding visibility: hidden to a portion of an element.
It’s also of note that IE6 and IE7 do provide support for clip but instead of commas separating the values, those browsers require white space instead. It seems that most other browsers also support clip with white space instead of commas, so if you want full support you’ll have to either serve IE its own styles with the space-delimited syntax or else just use spaces for all browsers. I haven’t tested spaces in all browsers, so test before you do anything.
A Funky Animated Gallery
The clip property is included in the W3C’s list of animatable properties, so I put together a wacky little animated gallery just to demonstrate how clip works. View it with the button below and click any of the images to see them animate.
I think part of the reason absolute positioning is required is to avoid complexity with content flow. For example if you clipped a 500×500 element to a 100×100 area, would this element take up the original 500×500 (with a ton of blank space) or just 100×100? And if it’s the latter, how would it be positioned? Absolute position basically sidesteps those issues.
Demo doesn’t work on iPad 1.
The effect on the demo pages appears when the “:active” state of the images is triggered. I’m not sure how you would trigger an “:active” CSS pseudo-class on an iPad. I believe you could do it on a link, but I’m not sure about other elements. When I test on iPhone, I don’t see it working either.
This is why touch screen should really be treated like a completely different UI.
Demo doesn’t work on my galaxy note. With the default browser or dolphin browser.
Same as above. I don’t think “:active” states work on mobile devices in the same way. The JSBin, uses :hover instead:
http://jsbin.com/esused/1/edit#html,live
But obviously, touch devices won’t see the transition on :hover either.
You wrote: “The first thing you should know about clip is that it can be applied to an element only if that element is set to position: absolute.” That’s only half-true.
The CSS spec says that the ‘clip’ property “applies to: absolutely positioned elements” which is not the same as elements set to position: absolute, but also includes position: fixed, cf. http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning
Good find. I’ll update the article. I like those little obscure points from the spec.
Note that:
* you can’t animate from clipped to auto
* a % clip isn’t valid (like rect(0, 100%, 100%, 0))
* animating to rect(0, 999px, 999px, 0) might be surprising (the animation/clip doesn’t stop after the element’s width/height)
Just my 2 cts
Good points, Rudie.
The one about percentages might be worth adding as a side note in the article. Thanks.
I don’t understand why the :hover is triggered when clicking on the image.
It’s not :hover, it’s “:active”. Like when you click on a link and it changes color while you’re clicking on it. That happens if the :active class is set on the link. Kind of like “:focus”, but different. I guess the demo could trigger the transition on :focus too, to make it keyboard accessible…?
I think it’s only there to show that, this image is a click-able region.
I tried on the demo, i found that
.clip:active{
clip:auto;
}
auto clipping the image to its default dimensions doesn’t work.
Yes, I noticed the same thing when I was testing. You’d think that would work, but for some reason it doesn’t. I probably just haven’t examined the spec closely enough to realize why.
So instead you have to set the
rect()values explicitly back to the values that are equivalent to “auto”.Enough is change clip to “unset” value or change position to static/sticky/relative.
Hi !
Thanks for this article. It’s been a long time since I wanted to learn a little bit more about the clip property, but I never found any reliable (and understandable) source to.
It’s pretty clear now. Nice property, clearly useful in some cases. I love your demo by the way, it’s a wonderful example of the clip property.
Thanks for sharing. Cya ! :)
.example {
clip: rect(110px 160px 170px 60px);
clip: rect(110px, 160px, 170px, 60px);
}
should allow both IE6 compatibility and newer browser support
Nice post dude. I have to say this has been a good one for me because I have always seen the clip property come up in auto guess when coding, but have never really got round to finding out what it does.
Thanks for the tips though :B
it’s nice…..
Thanks