carlos-sanchez
11/14/2013 - 12:42 AM
Clip property. First thing you should note: the clip property only works on elements with position: absolute or position: fixed. It won’t w
Clip property. First thing you should note: the clip property only works on elements with position: absolute or position: fixed. It won’t work with relative or static positioning.
The clip property accepts only three different values:
auto: this is the default behavior. Setting clip to auto is the same thing as not using clip at all.
inherit: well, it inherits the clip value from its parent.
a shape function. Currently only rect() exists.
Now, let’s finally dig into the rect() syntax. It requires four length values, separated by commas: top, right, bottom and left. As for padding or margin shorthands, it’s clockwise.
clip: rect(, , , );
Now pay attention because it can be tricky. Both the top and the bottom values define the offset from the top border and the left and right values define the offset from the left border.
In the example we want to keep the portion of the element between 40 and 150px vertically and between 80 and 260px horizontally.
Like he
clip: rect(40px, 260px, 150px, 80px);