CSS3 Example Tutorial: Detailed Explanation of clip properties

Article Introduction: I can confirm that clip attribute has a lot of students do not know, because this attribute usage is very bottom, my first contact is in Drupal's topic, they have a piece of code that hides text, is to use of clip attribute.

The clip attribute is a property that you often misunderstand, and this article helps you to fully understand and learn the clip attribute, and use this property to produce better results.

I can confirm that clip attribute has a lot of students do not know, because this attribute usage is very bottom, my first contact is in Drupal's topic, they have a piece of code that hides text, is to use of clip attribute.

/* Hide only visually, but have it available for screenreaders*/. Visuallyhidden {   border:0 none!important;   Clip:rect (1px 1px 1px 1px);/*ie<8*/   clip:rect (1px,1px,1px,1px)   ; height:1px!important;   margin: -1px;   Overflow:hidden;   padding:0!important;   Position:absolute!important;   width:1px; }	 

If you don't know and don't worry, the next section will cover the various methods of the clip attribute. Read this article in detail and you will have a deep understanding of the clip attribute.

The clip attribute is described in this official website : "By cutting the element to control the display area of the element, by default the element is not made any cuts, but it is possible that the clipping area also displays the clip attribute set."

You should have seen the use of JavaScript plug-ins to cut elements, but you can also use the CSS Clip property implementation, there may be some limitations, but we can see together.

Grammar:

To understand the clip attribute, it is important to learn the syntax of clip first:

. selector { 	clip:   auto  inherit}	 

First you should note that theclip property can only work if the element has the "Position:absolute" or "position:fixed" attribute set. clip cannot work on the set "Position:relative" and "position:static".

To tell you the truth, I really don't know why. At the very least, I didn't find any topic on the Web, so if you know why, I hope you can share some knowledge in the comments below.

The syntax above tells us that the clip property accepts only three different attribute values:

1. : Shape is a function function when using only the rect () attribute;
2. Auto: This is a default value, clip setting the auto value is the same as without cutting;
3. inherit: Inherits the clip attribute value of the parent element.

Many times, you may want to use more shape function functions, such as rect () and Circle (), but so far only the Rect () function can be used, but don't worry, this feature will help us make a lot of cool effects.

Rect () using

Next, let's look at the rect () usage method. Rect () needs to set four values: Top, right, bottom and left. They need to be separated by commas, and the rect () attribute value has the same standard as margin, padding, and bodrder, following the rule that Trbl rotates clockwise.

In CSS2.1, the Rect () and specified offsets are calculated from the top edge of the element box; and the specified offset is calculated from the left edge of the element box.

Let's simply look at an example:

P#one {clip:rect (5px, 40px, 45px, 5px);} p#two {Clip:rect (5px, 55px, 45px, 5px);}	 

The example above is a row cut in a rectangular box in 50x55px, with a dotted rectangle:

, , , can set the value to "auto" or the length value . The negative length value can also be allowed. Where the value is "Auto", the edge of the clipping area is the same as the edge of the element box. For example, when and are set to auto, they are equal to the top and left values of 0, and if and are set to auto, They are equal to the width of the element (this width includes the border, padding, and width of the element), or simply understood as 100%.

According to the above, the clip is divided into the following categories:

1. Do not show the clipping area: when the bottom value in rect () is less than the top value, or if the right value is less than the left value, the entire clipping area is not displayed. For example:

. rect2 img {   clip:rect (13px,0,161px,30px);/*right value is less than the left value */}. rect3 img {   clip:rect (13px, 164px, 0, 30px);/* Bottom value is less than top value */}	 

2, top and left values are auto, when top or left value is auto, equivalent to a value of 0;

. rect4 img {   clip:rect (auto, 164px, 161px, 30px); rect5 img {   clip:rect (13px, 164px, 161px, Auto);	 

Rect (auto,164px,161px,30px) effect

Rect (13px,164px,161px,auto) effect

3, bottom and right take the value of auto, when bottom and right take the value of auto, the equivalent of the element of 100% width.

. RECT6 img {   clip:rect (13px, Auto, 161px, 30px); rect7 img {   clip:rect (13px, 164px, Auto, 30px);	 

Rect (13px,auto,161px,30px) effect

Rect (13px,164px,auto,30px) effect

3, bottom and right take the value of auto, when bottom and right take the value of auto, the equivalent of the element of 100% width.

Click Demoin detail.

Rect () cannot support percent values, which requires special attention.

Browser compatibility

You may be very concerned about the compatibility of this attribute do not know how? Rest assured that the clip property is well supported and standard syntax is supported in chrome1.0+, firefox1.0+, opera7.0+, safari1.0+, and ie8.0+. But in ie4.0 to ie7.0 we still need to do some processing, we need to remove the comma between the values of each attribute.

. my-element {   position:absolute;   Clip:rect (10px  350px  170px  0);/* IE4 to IE7 *   clip:rect (10px, 350px, 170px, 0);/* ie8+ & other BR Owsers */}	 

Special attention needs to be paid to the IE4-IE7 to be written in front of the standard statement, otherwise there will be no effect on other browsers.

Case

Above is the explanation of various theories, next we come together to do a case, through clip realize the effect of sprites in the line.

To make an effect of the above diagram, we usually use three diagrams to make, then use the Clip property we can use the sprites graph to achieve the effect of the above, the difference between the two I don't say, we look at their comparison screenshot:

The diagram shows everything, and the next thing we see is how to use clip to implement the effect, first write a simple HTML structure:

 
 

  

  
A very simple structure, the initial effect is as follows:
  
 

  

  

  
 

  

  
First, give him a basic layout style:
  
 

  
* {   margin:0;   padding:0; }	  #wrapper {   position:relative;   width:386px;   margin:50px Auto;   List-style:none outside none; }	 #wrapper li {   width:128px;   height:128px;   Float:left;   position:relative; }	 
 

  

  
This effect is as follows:
  
 

  

  

  
 

  

  
It's a far cry from the effect we need, the next need to clip to play his function, we simply first analysis, for these three masks, distance from the top is "0" and the bottom is "128px", so we identified two parameters, Only the left and right parameters need to be determined for each mask.
  
 

  

  
First look at sad Kuai, who is at the far left of the sprites picture, then we can clearly determine his other two values: the left-hand is the 0;right 128px, as shown in the following figure:
  
 

  

  

  
 

  

  
For the happy face, we can calculate or measure the left value of 256px in the middle of the sprites graph according to the relevant parameters, but this time there is a detail, we use the clip to cut, the front will leave a blank (that is, sad face position), In order to display it properly, you need to set a left value of " -128px" in this img to pull the happy out:
  
 

  

  

  
 

  

  
The last one is angry face, in front of the method we can easily get the left value of the 256px,right value of 384px (here also may be auto, said before), the same as the previous placeholder, also need to pull back with the left value:
  
 

  

  

  
 

  

  
The detailed code is as follows:
  
 

  
. icons {   position:absolute;   top:0;   left:0; }  . Happy {   clip:rect (0 256px 128px 128px);   left:-128px; }  . Angry {   clip:rect (0 384px 128px 256px);   left:-256px; }  Sad {   clip:rect (0 128px 128px 0);}	 
 

  

  
This way, the effect is out, you can click here to see the effect.
  
 

  

  
Here is just one of the very simple case effects, in fact you can play your imagination, with some CSS3 special effects to produce some cool effects.
  
 

  

  
This is a very special attribute, is also a very rare attribute, rarely because he is not known, although he is a lot of restrictions, but in some cases using this property can easily help you achieve the effect you need. And the use of this property is not complicated. Through the above introduction, we should have a better understanding of clip. I hope this article can be a gain for everyone.