CSS3 Gradients for all browsers
What are CSS3 Gradients ?
Well, A Gradient can have many different dictionary meanings, but in terms of Web Design, we can define gradient as “A fill consisting of two or more colors blending together”. So If one color blends with the other color in a straight line, then this is called a simple Linear Gradient.
In earlier days of web design, The gradient effect on a website was possible only with the use of images (A sliced image getting repeated along the x-axis or y-axis). But now, when all the major browsers are in a race to expand their functionality, and support for the CSS3 properties, almost all of them have started providing the support for CSS3 gradient.
None of them have started supporting them fully, but a partial support is provided by most of them including webkit browsers ,gecko browsers, and internet explorer also. Since the partial support is provided by the browsers, we need to use the vendor specific prefix (-moz
for Mozilla Firefox, -webkit
for Webkit browsers) with the CSS3 property. Also all the browsers have a different syntax for this property. We will see that later.
Why use CSS3 Gradients ?
CSS3 gradients are partially supported by the browsers; and on top of that the image technique (A sliced image getting repeated along the x-axis or y-axis) for generating the gradient effect on a website works perfectly well in all the browsers. So the question is why do we care about using the CSS3 gradient property?
Before answering this question, let me tell you that CSS3 gradients fall into a category where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. That’s right, so if we use the CSS3 gradient property (with fallback image or background), then the browsers which support the CSS3 gradient will not load the image fallback; which will result in 1 less HTTP request – Thus making your website load faster .
How to use CSS3 Gradients ?
Alright, Now lets come to the point, and see (and understand) how this property is used in different browsers. Gradient is a replacement for an image. So gradient is used with the background-image property.
<style type="text/css">
div.testing {
background-image: url("images/background-image.png") repeat-x 0 0; /* Fallback Image - For all other browsers not supporting linear gradient property */
background-image: -moz-linear-gradient(top, #0c2f08 0%, #0cff06 100%); /* For Mozilla Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, from(#0c2f08), to(#0cff06)); /* For Webkit browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c2f08', endColorstr='#0cff06'); /* For Internet Explorer */
}
</style>
As you can see in the above code snippet, we have used 4 different lines of code. These 4 lines are for different browsers, to make sure that this is supported by all the browsers. We will see and understand the meaning of each line one by one.
The first line in the code is a simple background-image
property. This is actually the traditional way of using the gradients on web pages. This is a fallback property; which means It is supposed to be used by only those browsers that dont support the css3 gradients (like opera).
The second line in the code is used by the gecko browsers like Mozilla Firefox. The picture given below explains the property in detail.
The third line in the code is used by the webkit browsers like Chrome and Safari. The picture given below explains the property in detail.
The third line in the code is used by Internet Explorer. The picture given below explains the property in detail. Internet Explorer gradient filter doesn’t support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
The Final Outcome
For more information on CSS3 Linear Gradients, please visit the following links:
Vikram Mehta's Blog 