CSS Clip:rect Rectangle clipping function and some application introduction

CSS Clip:rect Rectangle clipping function and some application introduction

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=1565

One, long story short

CSS has a property called clip , for trimming, clipping meaning. The rect rectangle clipping effect of the element can be achieved with its property keyword. This property is peacefully in CSS2.1, and there is basically no compatibility issue with browsers such as Max-height/display:table-cell. However, it seems that this property is seldom used by people. I summed up three reasons: the first is the understanding of some threshold, and the other people do not use much; third, there are many alternatives to this property's functional effect. This kind of state is similar to ordinary computer users using the XP system is very good, and then let him use the Mac system, it may be because of the use of unaccustomed, other people do not use, functional XP system basically have and support a broader and back to the XP system. In fact, what kind of operating system is better? I think it goes without saying.

So, we use overflow to achieve a blunt tailoring and native clip tailoring is somewhat similar to the use of XP system and Mac.

To be honest, I didn't use a lot of myself, and I learned and used this attribute only two years ago to solve some special problems in a real project. Last month's "CSS relative/absolute (Relative/absolute) positioning series (iii)" article in the usability of the hidden part of the application of this attribute, its role is the usability of the page element is hidden, the relevant CSS code is as follows:

. hidden{    Position:absolute;    /* IE6, IE7 *    /Clip:rect (1px, 1px, 1px, 1px);}

According to my own test, it seems that the third line of CSS above is superfluous. However, there is a reason for this, but I do not think of a reason, but also look at others to guide the maze.

"The United States of America, not the usual way", because it seems that everyone has ignored the clip attributes, so I decided to dig a little bit below clip the properties, so that everyone began to focus on and familiar with this property. Incidentally, this is not a call to care about the Chinese pastoral dog This gimmick ingredient a lot of things, but really in the actual project can be a great place to shine.

Second, Clip:rect attribute intimate Contact

According to Dreamweaver's automatic prompts, clip there are the following available property keywords:

Among them, it is said that the inheritance of inherit IE browser is not supported, so the property is a soy sauce Emperor, and then "auto" is not cut the meaning, in addition rect to the role of the reset, it is also a deputy emperor of soy sauce, so the real on the face of the surface rect(top right bottom left) , so, we only discuss rect(top right bottom left) this fellow.

In order, in the top → right → bottom → left CSS is unified, like the order of four values of margin, border-width, and so on the order of four values--starting from the top, clockwise rotation said ~ ~ But here the four values are not abbreviated.

Which top right bottom left represents the property values for each location, as if it were width:200px; in 200px , so we will have a similar use of the following:

Rect (30px 200px 200px 20px)

What does it top right bottom left mean here? How do we understand that?

In fact, it means the top of the top right bottom left visible area of the final clipping, the right, the bottom and the left. All values represent positions and are relative to the upper-left corner of the original element. So

Rect (30px 200px 200px 20px)

The implication is that the top edge of the final trimmed rectangle is 30 pixels from the upper margin of the original element, and the right edge of the clipping rectangle is 200 pixels from the left edge of the original element, and the lower edge of the clipping rectangle is 200 pixels from the top of the original element, and 20 pixels from the left edge of the original element to the clipping rectangle.

The above statement is long and difficult to understand, you can imagine: hungry n days you suddenly appeared in front of a piece of delicious big 300 cm * 300 cm square hand-caught cake, you pull yourself along with the sharp Japanese knife, in the distance from the top 30 centimeters a knife, Then, 200 centimeters to the left of the place to click a knife, and then at lightning speed at the top of the distance of 200 centimeters and a distance of 20 centimeters of a knife. The middle part of the four knife left is the cut. So, you can be top right bottom left understood as trimming in these positions with a Broadsword click.

or understand the reference line that is built in Photoshop for a large background in four directions, as shown in (300 pixels *300 pixels):

The so-called "a picture wins thousands of words, thousands of words are lost to an instance". In order to understand the clip:rect meaning of the following four values more intuitively, I have made a demo page specifically. You can get a hard click here: CSS clip:rect Several value meanings indicate demo

In the demo page, I have separated the 4 values, you arbitrarily modify one of the values, the page will appear a translucent black layer to indicate that this part of the content will be trimmed out. For example, we modify the first value to be 30, such as:

When you lose focus, you'll see a clipping action area on the image that corresponds to the value of the change:

Similarly, we modify the values of each box to 30 200 200 20, when the effect on the image is:

Where the image is not covered by a black translucent layer is the final clipping area, you can click the "Trim" button below to confirm the clipping:

The result is as follows:

You can also modify other values to do the testing. If the final picture is all covered by a translucent layer, then the picture will be cropped to a point.

Finally, it is necessary to state the following:clip:rect rectangle clipping can only be used position:absolute on elements .

Three, the Clip:rect rectangle cut some application introduction

1. Usability Concealment
According to top right bottom left the interpretation above, if left >= right or bottom <= top , the element will be completely cut off and invisible, i.e. "hidden". Elements that are hidden in this way can be identified by assistive devices such as screen readers, which improves the usability of the page.

For example:

/*left = right, bottom = top*/

Or

/*left > right*/

Or

/*bottom < top*/

And so on, the so-called small hands shaking a shake, cut have wood. //zxx: The effect of the above several values you can go to the demo page provided in the Part2 section to do the test drip.

2. CSS Sprite positioning under the IMG tag
In order to save the image resources, we often integrate the small picture into a picture, called the picture Merge technology, called the CSS Sprite abroad, contains the meaning of "Genie". Then, the image can background be displayed accurately by using the features that are not visible outside the element area background-position .

Even the absolute cannot not have the money is omnipotent, obviously, background-position under the CSS sprite localization also cannot apply in each kind of situation. For example, sometimes we want sprite pictures to delay scrolling, or it can be easy to save a right-click picture as ... or some special background-position attribute does not work.

For example, it is well known that the IE6 browser does not support the Alpha transparent channel PNG picture (which will have a blue background), as shown in:

We can use the filter filter to fix this problem. However, if the PNG image is transparent in the form of a background-image filter, it is not supported for background-position positioning, that is, we can not use the Background property under IE6 to implement the PNG image sprite positioning. At this point, in order to achieve IE6 under the PNG image of the Sprite positioning can only be done on the page, using the IMG tag, not the background-image attributes.

Then, the image under the IMG tag is not background-image automatically hidden like an outer part of the element area, so we need to use some means to crop it, and clip:rect it comes in handy.

You can click here: clip:rect PNG image Sprite positioning demo

The sofa PNG picture in the demo page is displayed as follows:

If you have a IE6 browser on hand, opening the demo page will look like this:

You can see the hover effect of the sprite positioning switch when the mouse is moved up:

You can see that with the transparent filter applied, the img clip:rect hover switch effect of the sprite picture is easily realized with the label mate. This can also be implemented in the background attribute, OK, now click the "IE6 PNG transparent button" below, apply the AlphaImageLoader transparent filter, and then the mouse pass, the result can also achieve hover effect, see:

The CSS code is as follows:

. clip_a{display:block; width:128px; height:128px;}. Clip_a img{border:0; position:absolute; clip:rect (0 128px 128px 0);}. clip_a:hover{border:0;}. Clip_a:hover img{margin-top:-128px; Clip:rect (128px 128px 256px 0);}

Thus, CSS sprite positioning can not only use background attributes, the use of labels on the page img , with clip:rect clipping is also easy to achieve the positioning effect.

3. Preview effect of picture clipping
With regard to image clipping, I have previously translated a jquery plugin called Jcrop, which is called "jquery photo image clipping plugin jcrop Chinese translation", with a demo that contains a clip preview effect that you can click here to access.

The trim preview in the inside uses margin positioning, which has a more complex calculation.

In fact, it is most appropriate to use the trim preview effect as a clipping property. As a result, I wrote a picture clipping preview demo using the original "picture rotation + Cut JS plugin" that I wrote earlier. Zxx.crop_rotation.js.

You can really click here: Clip:rect Picture Clipping effect Demo

The rotation in the demo page can be directly when air, move, drag the schematic area, will see the corresponding clipping preview on the right side:

This example is intended to demonstrate the potential of clip:rect, so the principle and use, you are interested to refer to the above mentioned article, as well as the demo page related source code.

Iv. nagging before the Qingming festival

Qingming season rains in succession, the road pedestrians want to rains, look at the weather like rain. Return home tonight, worship the ancestors. Because the country did not install broadband, so today directly in the work time to toss this article, so the end may be slightly hasty. In addition, the qualification is limited, clip:rect research is not deep, so the text also inevitably has the expression of inaccurate places, welcome to correct, not very grateful.

This article is a few clip:rect examples of application is purely to stimulate, because of its own features, clip properties must have other more subtle applications, it depends on your wisdom.

Well, that's all. I wish "Mina sang" the Festival all smooth.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1565

CSS Clip:rect Rectangle clipping function and some application introduction