CSS for compatibility with the gradient background (gradient) effect

First, a little 俗态 of the opening

If two years ago, the implementation of the "compatibility of the gradient effect" is not expected to be raised, at that time, said the gradient background, most of the thought is IE gradient filter, other browsers have not yet supported, but, in the CSS3 support is becoming more perfect today, to achieve compatibility of the gradient background effect has become completely possible, This article will show you how to implement the gradient background effect of compatibility. In many browsers, the Opera browser is not currently supported.

This example effect is the same effect, that is, the vertical gradient, the starting color red, the end color blue, the end of the blue transparency is 0.5.

Second, the gradient background under IE browser

The use of the gradient filter for IE is required using the gradient background of IE. The following code:

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

Related instructions:
The above filter code mainly has three parameters, in order: StartColorStr, EndColorStr, and GradientType.
Where gradienttype=1 represents a horizontal gradient, gradienttype=0 represents a longitudinal transformation. Startcolorstr= "Color" represents the starting color of the gradient gradient, and endcolorstr= "color" represents the color at the end of the gradient.

The above code realizes the red to blue gradient, but does not contain the transparency change, this is because IE does not currently support the Opacity attribute and the Rgba color, to realize the change of transparency under IE, or the need to use IE filter, IE transparency Filter function is more powerful, This power is similar to the use of css-gradient background gradients in Firefox or Safari browsers. For example, use the following:

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

The meanings of each of these parameters are as follows:
Opacity represents transparency, the default range is from 0 to 100, and they are actually in percent form. In other words, 0 is completely transparent and 100 is completely opaque.
Finishopacity is an optional parameter that you can use to specify the transparency at the end if you want to set the transparency effect of the gradient. The range is also 0 to 100.
Style is used to specify the shape characteristics of transparent areas:
0 for Unified shape
1 for linear
2 Stands for radial
3 represents the rectangle.
StartX The x-coordinate at the beginning of the gradient transparency effect.
Starty the y-coordinate at the beginning of the gradient transparency effect.
Finishx The x-coordinate at the end of the gradient transparency effect.
Finishy the y-coordinate at the end of the gradient transparency effect.

To achieve this, the code for the vertical gradient of red and blue with transparency changes under 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:D XImageTransform.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:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=1);} <div class= "Gradient" ></div>

Results such as:

Third, the background of the gradient under the Firefox browser

For the implementation of the Firefox 3.6+ gradient background, you need to use the CSS3 gradient property,-moz-linear-gradient property, In the previous article I described in detail the implementation of Firefox3.6 under the gradient background, you are interested can be ruthlessly click here: CSS gradient CSS3 gradient in the use of Firefox3.6. I'm not going to go into specifics here, but for the implementation of the effect you mentioned at the beginning of this article, see 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 under the Firefox3.6 browser is:

Four, Chrome/safari browser under the gradient background implementation

For the WebKit Core browser, such as the Chrome/safari browser under the gradient background of the implementation is also using the CSS3 gradient method, css-gradient, specifically-webkit-gradient, so the term Firefox browser there are some differences. I have a very detailed introduction to this in the previous article, you can click here: CSS gradient gradient WebKit core browser use. The specific use 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 the Safari 4 browser is:

Added on 2011-04-07
The OPERA11 also supports CSS3 gradients. It uses a prefix that is consistent with Firefox and needs to be used -o- . In addition, Chrome's gradient usage is beginning to move closer to the usage of Firefox's browser.

V. Synthesis – the gradient background effect of compatibility

The relevant 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:D XImageTransform.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:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8*/    background: Red /* Some browsers that do not support background gradients *      /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 results are the above three categories respectively.
You can ruthlessly click here: Compatibility gradient Background effect Demo

Vi. Conclusion

The potential of CSS3 is so great that the gradient can create a lot of superb UI effects that were previously only possible with images. The implementation of CSS gradient background can effectively reduce the number of pictures on the page, that is, to reduce the HTTP request, is very useful. But the Internet Explorer has been squatting on the side of the latrine gnawing at the chicken leg-the delicious, the use of high-resource filters to achieve the gradient effect. So, for the time being, the application of the gradient background has yet to be weighed against the pros and cons.

CSS for compatibility with the gradient background (gradient) effect