CSS implements a gradient effect for compatibility

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:

. 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);} <Div class = "gradient"> </div>

The result is as follows:

3. gradient background in Firefox

For implementation of gradient backgrounds in Firefox (Firefox 3.6 +), you must use the css3 gradient attribute and the-moz-linear-gradient attribute.ArticleI have introduced in detail the implementation of the gradient background under firefox3.6. If you are interested, click here: CSS gradient css3 gradient is used under 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:

. Gradient {width: 300px; Height: 150px; Background:-moz-linear-gradient (top, Red, rgba (0, 0,255, 0.5 ));} <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/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 specific usage is not detailed. See the following code:

. Gradient {
Width: 300px;
Height: 150px;
Background:-WebKit-gradient (linear, 0 0, 0 bottom,

From (# ff0000), to (rgba (0, 0,255, 0.5);} <Div class = "gradient"> </div>

The effect of this Code in Safari 4 is:

Supplement:
Opera11 also supports css3 gradient. It is used in the same way as Firefox.-O-. In addition, Chrome's gradient usage also began to move closer to Firefox's usage.

5. Integration-gradient background Effects of compatibility

The related code is as follows:

. 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); Background:-o-linear-gradient (top, Red, rgba (0, 0,255, 0.5);} <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 great. With this gradient, you can create a lot of exquisite UI effects. In the past, these effects can only be achieved 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.

From Zhang xinxu-xin space-xin Sheng lives [http://www.zhangxinxu.com]
Original address: http://www.zhangxinxu.com/wordpress? P = 743