Referencia de CSS3 553b52


    Manuales

    CSS Reference Property

    clip 2i1k4m

    The clip property is used to clip out areas of an element, keeping only a portion of the element visible. 381f2x

    The portion of the element that is visible after the element is clipped is called the clipping region. The clipping is applied to the element’s border box area, which is initially entirely visible. Clipping an element is effectively similar to cropping it.

    The clip property only works on an element that is either fixed. It doesn’t have any effect on an element that is relatively or statically positioned.

    Using clip, you can specify offsets inwards that specify the areas from the edges of the element that are to be clipped out.

    The clip property only accepts one shape function, namely the rect() function, as a value. The rect() function takes four parameters which are offsets from the top and left borders of the element inwards.

    clip: rect(<top>, <right>, <bottom>, <left>);

    Both the top and the bottom values define the offsets from the top border, and both the left and the right values define the offsets from the left border.

    clip-offsets
    Image showing the offsets of the clip property.

    The clipping region, or the portion of the element that remains visible after the element is clipped, is defined by the offsets of the rect() function as shown in the image above. For more examples and explanation, see the Values and Examples section below.

    An element’s clipping region clips out any aspect of the element (e.g., content, children, background, borders, text decoration, outline and visible scrolling mechanism — if any) that is outside the clipping region. Content that has been clipped does not cause overflow.

    In CSS 2.1, all clipping regions are rectangular, using the rect(). The specification anticipates future extensions to permit non-rectangular clipping, and may also reintroduce a syntax for offsetting shapes from each edge instead of offsetting from a point.

    However, in CSS3, the clip-path property. agents are still required to the clip property, according to the spec, so you should be able to use the clip property.

    The clip-path property entry for more information.

    Official Syntax 3xs5l

    • Syntax: 

      clip: auto | rect() | inherit;

      where

      rect() = rect(<top>, <right>, <bottom>, <left>), and <top>, <right>, <bottom>, <left> are all <length> values (But see values section below for more information)
    • Initial: auto
    • Applies To: absolutely positioned elements
    • Animatable: yes; the offsets of the rect() function accept <length> values and are thus animatable as a length

    Values u704t

    auto
    The element is not clipped.
    inherit
    The element inherits its clip value from its parent.
    rect()
    Specifies a rectangular clipping region. That is, it specifies the area of the element which will be visible after the element is clipped.

    The rect() function takes four parameters. These parameters can be comma-separated or space-separated.

    rect(<top>, <right>, <bottom>, <left>)   /* standard syntax */

/* OR */

rect(<top> <right> <bottom> <left>)      /* backwards compatible syntax */

    The comma-separated syntax is the standard syntax. However, agents must separation with commas, but may also separation without commas (but not a combination), because a previous revision of the CSS specification was ambiguous in this respect. The space-separated syntax is backwards compatible.

    The top, right, bottom, and left arguments are offsets defining the clipping region. All four are <percentage>). The top and the bottom values both define the offsets from the top border, and both the left and the right values define the offsets from the left border.

    The rect() function also accepts the keyword auto as an offset. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s border box (i.e., auto means the same as ‘0’ for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box).

    The top, right, bottom, and left offset parameters of rect() also accept negative length values.

    Examples 2h2053

    The following example will keep the portion of the element between “40px” and “150px” vertically and between “80px” and “260px” horizontally.

    img {
    clip: rect(275px, 575px, 425px, 365px);
}

    The following image is the visual representation of the offsets defining the clipping region:

    clip-example
    Image showing the offsets defining the clipping region of the example.

    Internet Explorer 4 to 7 the older space-separated syntax, so in order to make sure your clipping works in those browsers, you can provide the old syntax right before the new one in the element’s rule set:

    img {
    clip: rect(40px 260px 150px 80px); /* IE 4 to 7 */
    clip: rect(40px, 260px, 150px, 80px); /* IE8+ and other browsers */
}

    Live Demo 6b4m17

    In the following demo, four images are placed on top of each other by positioning them absolutely inside their container. Using CSS transitions, each image will expand its clipping region once hovered, by applying the transition to the clip property.

    View this demo on the Codrops Playground

    Browser 572e63

    The clip property is ed in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

    Internet Explorer versions 7 back to 4 the old space-separated rect() syntax. The standard comma-separated syntax is ed starting from IE8.

    Further Reading 4s104w

    Written by

    Last updated June 4, 2020 at 3:03 pm by Mary Lou

    Do you have a suggestion, question or want to contribute? Submit an issue.