[CSS]-gradient background (gradient) for compatibility

ArticleDirectory

• I. Some unconventional opening remarks
• Ii. gradient background in IE browser
• 3. gradient background in Firefox
• Iv. gradient background implementation in Chrome/Safari
• 5. Integration-gradient background Effects of compatibility
• Vi. Conclusion

Source: http://www.zhangxinxu.com/wordpress? P = 743

I. Some unconventional opening remarks

If two years ago, the saying "compatibility gradient effect" was not proposed, at that time, when talking about the gradient background, most of the ideas were the IE gradient filter, other browsers are not yet supported. However, as css3 is increasingly well-supported today, it is completely possible to implement a gradient background Effect of compatibility. This article will show you how to implement a gradient background Effect of compatibility. Among the many browsers, opera browsers are currently not supported.

The effects of this example are the same, that is, vertical gradient. The starting color is red, the ending color is blue, and the ending blue transparency is 0.5.

Ii. gradient background in IE browser

The IE gradient filter is required to use the gradient background in IE browser. As follows:Code:

 
Filter: progid: DXImageTransform. Microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 1 );
 

Instructions:

The filter code above has three parameters: startcolorstr, endcolorstr, and gradienttype.
Gradienttype = 1 indicates a horizontal gradient, and gradienttype = 0 indicates a vertical gradient. Startcolorstr = "color" indicates the color starting from the gradient, and endcolorstr = "color" indicates the color at the end of the gradient.

The above code implements a gradient from red to blue, but does not include transparency changes. This is because IE does not currently support the opacity attribute and rgba color, so we need to implement transparency changes under IE, you still need to use the IE filter. The IE transparency filter is powerful, which is similar to the CSS-gradient background gradient in Firefox or safari. For example:

 
Filter: alpha (opacity = 100 finishopacity = 0 style = 1 startx = 0, starty = 5, finishx = 90, finishy = 60)
 

The meanings of parameters are as follows:
Opacity indicates transparency. The default range is from 0 to 100. They are actually percentages. That is to say, 0 indicates completely transparent, and 100 indicates completely opaque.
Finishopacity is an optional parameter. If you want to set the transparency of the gradient, you can use them to specify the transparency at the end. The range is also 0 to 100.
Style is used to specify the shape features of a transparent area:
0 represents a unified shape
1 represents linear
2 represents radiation
3 represents a rectangle.
X coordinate at the beginning of the startx gradient transparency effect.
Y coordinate at the beginning of the starty gradient transparency effect.
The X coordinate at the end of the finishx gradient transparency effect.
The Y coordinate at the end of the finishy gradient transparency effect.

Based on the above, the Code for implementing the red-blue vertical gradient with transparency changes in IE is as follows:

<Style type = "text/CSS">
. Gradient  {  
Width  :  300px  ;  
Height  :  150px  ;  
Filter  :  Alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 1)  ; 
-MS-Filter  :  Alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 1)  ;  
  }  
</Style>

<Div class = "gradient"> </div> 

The result is as follows:

3. gradient background in Firefox

You must use the css3 gradient attribute and the-moz-linear-gradient attribute to implement the gradient background in Firefox (Firefox 3.6 +, in the previous article, I introduced the implementation of gradient background in firefox3.6. If you are interested, click here: CSS gradient css3 gradient is used in firefox3.6. I will not go into detail here. For the implementation of the effects mentioned at the beginning of this article, refer to the following code:

<Style type = "text/CSS">
. Gradient{
Width:300px;
Height:150px;
Background:-Moz-linear-gradient (top, Red, rgba (0, 0,255, 0.5 ));
}
</Style>

<Div class = "gradient"> </div>
 

The effect of this code in the firefox3.6 browser is:

Iv. gradient background implementation in Chrome/Safari

the CSS-gradient (-WebKit-gradient) method is also used for the implementation of WebKit core browsers such as chrome and Safari gradient backgrounds, the Firefox browser has some differences. I have provided a very detailed introduction to this in the previous article. You can click here: CSS gradient WebKit core browser. The usage is not detailed. See the following code:

<Style type = "text/CSS">
. Gradient{
Width:300px;
Height:150px;
Background:-WebKit-gradient (linear, 0 0, 0 bottom, from (# ff0000), to (rgba (0, 0,255, 0.5 )));
}
<Style>

<Div class = "gradient"> </div>
 

The effect of this Code in Safari 4 is:

5. Integration-gradient background Effects of compatibility

The related code is as follows:

<Style type = "text/CSS">
. Gradient  {  
Width  :  300px  ;  
Height  :  150px  ;  
Filter  :  Alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 0)  ; 
-MS-Filter  :  Alpha (opacity = 100 finishopacity = 50 style = 1 startx = 0, starty = 0, finishx = 0, finishy = 150) progid: DXImageTransform. microsoft. gradient (startcolorstr = red, endcolorstr = blue, gradienttype = 0)  ;  /*  IE8  */  
Background  :  Red  ;     /*  Browsers that do not support Background gradient */  
Background  :  -Moz-linear-gradient (top, Red, rgba (0, 0,255, 0.5 ))  ;  
Background  :  -WebKit-gradient (linear, 0 0, 0 bottom, from (# ff0000), to (rgba (0, 0,255, 0.5 )))  ;  
  }  
<Style>

<Div class = "gradient"> </div> 

The effect is for the above three categories.
You can click here: the compatibility of the gradient background effect demo

Vi. Conclusion

the potential of css3 is very high. As for the gradient, Many exquisite UI effects can be created. In the past, these effects were only implemented using images. The implementation of CSS gradient background can effectively reduce the number of images on the webpage, that is, it reduces HTTP requests, which is very useful. However, ie has been squatting in the toilet and licking chicken legs-think it is delicious, you have to use a high resource consumption filter to achieve gradient effect. Therefore, the application of the gradient background still needs to be weighed.