Learning to use the css-property clip

You've probably heard about the new css3 property called Clip . Today we'll talk a bit about its syntax and will learn to create interesting effects with it.




Syntax

example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

The first thing you should know about Clip - is the fact that this property can only be added to the element that has absolute positioning ( position: absolute or position: fixed ).

The value can be defined as a form or set automatically. To auto has no restrictions and is the default for all elements.

To determine the form (currently allowed only rectangles) should set rect (), passing the values ​​that define the shape. Values ​​can be positive or negative.

The value of rect ()

example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

The values ​​passed to the rectangle () seem at first sight a little bit confused, but soon you realize that there is nothing complicated here. Values ​​determine the offset from the top and left of the item.

In other words, in the example above, the first value is attached to an imaginary line running horizontally long 110px from the top (first value) and the second horizontal line 170px from the top - this is the third value. The second meaning - to an imaginary vertical line up 160px left, and the last value - for other imaginary vertical line up 60px to the left.

If this confuses you, maybe this picture will help:

This skinshot uses guides to show you where to put the corresponding values ​​of imaginary intersecting lines. Bright field images are part of the image, which would be vidny.Ostalnye will be hidden. Thus, the "trimmed" the area is determined by the intersecting lines of the area that remains.

It should also be noted that IE6 and IE7 support this property, but instead of commas separating the values, this requires a browser space.

Create an animated gallery

Check out this gallery of animation, to better understand how the style parameter clip.
See the demo

Author:  impressivewebs