clip
The clip property in CSS allows you to specify a specific region of an element to display, rather than showing the complete area.
.clip-me {
position: absolute; /* absolute or fixed positioning required */
clip: rect(110px, 160px, 170px, 60px);
/* reset/default */
/* clip: auto; */
} The most common use case would be an image, but it's not limited to that. You could just as easily apply clip to a paragraph tag and only a portion of the text.
Those four values represent the top/left point and the bottom/right point, which forms the visible rectangle. Everything outside of that rectangle is hidden.
More Information
- The CSS Clip Property (Impressive Webs)
- MDN
Browser Support
The spec says to use commas to separate the values. IE 4-7 support this property, only without the spaces. Probably safest to use the commas. (reference).
Have seen report of browser on iPad 1 not supporting it.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| any | any | any | 7+ | 8+ | ? | 2+ |
Hey, glad you liked the image. :)
Just a quick correction. You said:
“The spec says to use commas to separate the values. IE 4-7 support this property, only without the spaces.”
I think you meant to say “…only without the commas” or “…only with spaces”.
“Those four values represent the “top/left” point and the “bottom/right” point, which forms the visible rectangle. Everything outside of that rectangle is hidden.”
I think that “top/left” should be “top/right” and “bottom/right” should be “bottom/left”.