What is the clip property for?

Question

What is the clip property for?

Navigation

#1 by (13 votes)
#2 by (9 votes)

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 rect(0 0 0 0); .

Then I had this doubt:

What is the clip property?

Note: The question itself has nothing to do with responsive elements, but it was only the occasion where I saw the use of clip for the first time .

css css3

asked by anonymous 11.04.2017 / 14:23

2 answers

9

The clip property is for trimming an element that is absolutely positioned, it is for cases where an image is inserted inside an element smaller than it, in which case we can use the clip property to crop the image, adjusting to the image size of the parent element, briefly, property defines the area of the element that will be visible .

Ex:

/*rect(top,right,bottom,left)*/
clip: rect(110px, 160px, 170px, 60px);

Result:

sourceimg: css-tricks clip

Observations:

According to MDN the property is deprecated > and you should use the clip-path property instead.

The default property value is auto , ie it does not limit the view area of the element.

Clip property only works on elements with position:absolute or position:fixed . It will not work with relative or static .

For compatibility information: w3schools css clip

Here is a functional example of the property, defining the visible area of an image, to see the complete image just comment the clip property.

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

11.04.2017 / 15:03

Why use error_reporting with display_errors and display_startup_errors? What is the difference between Apache Cordova and Ionic?

score 13 · Accepted Answer

CLIP means CLIP, that is, it trims the contents of a box.

The syntax is:

.container {clip: rect (top, right, bottom, left);}

where:

• container is the HTML element whose content will be trimmed;

• clip is the trim property;

• rect(top , right , bottom , left) is the function to cut whose parameters are the coordinates for the clipping expressed in CSS measures.

Imagine that you need to cut the highlighted area in the following figure with their coordinates:

InthiscasethecodeCSSwouldlooklikethis:

.container{clip:rect(40px,150px,260px,80px);

Whererectistheparametersforcroppingtheimage.

Theresultofcroppingthisimageis:

Notethattheareaoftheimagethatwascroppedremainswithyourspaceinthedocument.

Note:Theclippropertyonlyworksforfixedorabsolutepositionedelements.Rememberthatinthe mdn documentation has the following statement.

This feature has been removed from Web standards. Although some browsers can still support it, it is in the process of falling. Avoid using it and updating existing code if possible; Refer to the Compatibility Table at the bottom of this page to guide your decision. Please be aware that this feature may work at any time.

Use clip-path instead!

Reference:

link