13
I was taking a look at a code where I taught some techniques to create a responsive table.
I came across the use of property clip, followed by the value rect(0 0 0 0);.
Then I had this doubt:
What is the property for clip?
Note:The question itself has nothing to do with responsive elements, but it was just the occasion where I first saw the use of clip.
13
CLIP means CROP, that is, it cuts out the contents of a box.
.container {clip: rect (top, right, bottom, left);}
where:
• container is the HTML element whose content will be cropped;
• clip is the crop property;
• rect(top , right , bottom , left) is the crop function whose parameters are the crop coordinates expressed in CSS measures .
Imagine that you need to cut the area highlighted in the following figure with their respective coordinates:
In that case the code CSS would look like this:
.container {clip: rect (40px, 150px, 260px, 80px);
rect is the parameters for image crop.The result of cropping this image is:
Note: The property clip only works for elements positioned in Fixed or Absolute way. Remembering that in the documentation of the mdn has the following statement.
This feature has been removed from Web standards. Although some Navigators can still support him, he’s in the process of crashing. Avoid using it and update existing code if possible; See compatibility table at the bottom of this page to guide your decision. Be aware that this appeal may cease to work at any time.
Use clip-path instead!
Reference:
9
The estate clip is used to crop an absolutely positioned element, serves for cases where an image is inserted inside an element smaller than it, in which case we can use the property clip to crop the image, adjusting to the size of the parent element, briefly, property defines the area of the widget that will be visible.
/*rect(top,right,bottom,left)*/
clip: rect(110px, 160px, 170px, 60px);
img source: css-Tricks clip
According to the MDN the property is obsolete and use the property
clip-pathin his stead.
The value default of the property is auto, that is, it does not limit the display area of the element.
The clip property only works on elements with position:absolute or position:fixed. Won’t work with relative or static.
For information on compatibility: w3schools css clip
Here is a functional example of the property, defining the visible area of an image, to see the full image just comment on the property clip.
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(20px, 130px, 180px, 30px);
}
</style>
</head>
<body>
<img src="https://pbs.twimg.com/profile_images/1196566139/CRV_-_Urso_comptd.jpg" width="200" height="300">
</body>
</html>Perfectly @Andersoncarloswoss, added to the answer.
And it can also confirm the sequence of the parameters of rect? I found here <top> <right> <bottom> <left> and you put left and right exchanged in the code comment.
@Andersoncarloswoss, again, many thanks for the comments, corrected.
Browser other questions tagged css css3
You are not signed in. Login or sign up in order to post.
The estate
clipserves to define the visible area of a fixed element on the page. Applied to an image, it could be compared to an action of Crop. The four values inrectdefine the visible area:rect(<top> <right> <bottom> <left>). How can this be applied to responsive tables (and use all values 0), I can’t say.– Woss
@Andersoncarloswoss As far as I know it is commonly used in responsiveness to cut large images (usually from the sides) when there is content that can be hidden so as not to have to shrink the image. That is, when decreasing the screen, it is sometimes preferable to cut irrelevant content from the sides instead of decreasing the image.
– Leon Freire
Cool question, particularly unaware of this property.
– Alicia Tairini
The two answers already mentioned that it was obsolete...
– bfavaretto