CSS cropping clip and cssclip

CSS cropping clip and cssclip
* Directory [1] define [2] RECT [3] before the application

The clip attribute of CSS cropping is rarely used at ordinary times, but in fact it is not a new attribute of CSS3, and it has started to appear very early. This article introduces the knowledge about clip attributes.

 

Definition

An absolute or fixed positioning element uses the clip attribute to change the shape of the cropping area, but does not change the width and height attributes of the element.

Clip

Value: rect (top, right, bottom, left) | auto | inherit

Initial Value: auto

Applied to: absolute or relative positioning Elements

Inheritance: None

[Note] the default value auto indicates that the content of the element should not be cropped.

Rect

Clip: the value in the rect (top, right, bottom, left) is not the Edge Offset, but the distance from the upper left corner of the element. Specifically, top and bottom indicate the distance from the upper boundary of the element; left and right indicate the distance from the left boundary of the element. Here, the boundary of an element refers to the outer side of the element border.

The rect (...) syntax is not the same as other CSS syntax. The reason is that it is based on the early positioning draft, which uses the upper left offset mechanism. Before CSS2, IE implementing this syntax has become a complete recommendation, so the standard is changed from edge offset to applicable. However, this means that if the height and width are not clearly defined, the same cropping area cannot be set.

[Note] IE7-the browser does not support rect (top, right, bottom, left), and supports rect (top right bottom left). other browsers support both writing methods.

Clip: rect (...) only supports length values and auto, but does not allow percentages. If it is set to auto, the cropping boundary is set to the appropriate content boundary. Set auto for top or left, which is equivalent to 0; Set auto for right or bottom, which is equivalent to the width of the horizontal direction and the height of the vertical direction and

[Note] the edge of the clip area in the horizontal or vertical direction of the element is the outer frame, excluding the outline

Application

[1] Hiding Effect

When top> = bottom or left> = right in clip: rect (top, right, bottom, left), the element hiding effect can be achieved, which is similar to visibility: hidden;

[2] image sprites

Css sprite is a Web page image processing method. It allows you to include all the sporadic images on a page into a large image, and then use background-position to display the expected area. For more information about CSS Sprite, see here. Clip can achieve the same effect.

div{    height:128px;    overflow: hidden;}img{    position:absolute;    background-color: rgba(0,255,0,0.5);    clip:rect(0,auto,128px,0);}img:hover{    margin-top: -128px;    clip:rect(128px,auto,auto,0);}

<Div>  </div>

[3] demo of lyrics

Using clip and background-clip to demonstrate the effect of the lyrics can also be achieved by changing the width, which is mainly used to expand the idea.

@keyframes loop{    0%{        clip:rect(0,0px,100px,0);    }    100%{        clip:rect(0,520px,100px,0);    }}.show,.con{    width: 520px;    height: 100px;    line-height: 100px;    font-size: 30px;    position:absolute;    background-color: lightgreen;}.con{    animation: loop 6s linear infinite;    -webkit-background-clip: text;    color: red;}    

<Div class = "show"> I used to cross mountains and the sea, and also across the sea </div> <div class = "con"> I used to cross mountains and the sea, it also goes through the sea of people </div>