Utilising CSS3 gradients

Posted 1 year ago by Andrew Greig 2 Comments
Tags: CSS, CSS3, Web Development

Unless you have been hiding under a rock lately, it would have been hard to miss the sudden boom in talk regarding HTML5 and CSS3. Most of that talk, however, is just talk, due mainly to the fact that mass adoption of HTML5 and CSS3 is slowed by the less than enthusiastic pickup by browser developers. Until the release of Internet Explorer 9 you will have to be content with only about 30% of your audience being able to benifit from many of these new technologies.

There are however, some new CSS3 techniques that, due to special properties, can actually be fully adopted right now with ease. The one I’m going to discuss here is the new webkit and mozilla Gradient. This property is supported by Safari 2+, Firefox 3.6+ and Chrome. The thing that makes it unique is that CSS3 gradients allow you to specify fallbacks (i.e. images) so that browsers that don’t support the property just use the image instead. What does this mean? Well for every image you replace with an gradient, there is one less HTTP request to the server. Which personally I think is awesome!

How does it work?

This is the code you can specify for your HTML element.

div {
	background-color: lightblue; /* Fallback Color */
	background-image: url(images/gradient.png); /* Fallback Image */
	/*Firefox Linear Gradients*/
	background-image: -moz-linear-gradient(100% 100% 90deg, #284e70, #5d84a8);
	/*Safari, Chrome Linear Gradients*/
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5d84a8), to(#284e70));
}

Which produces something awesome like this: (You need a compatible browser to view these examples.)

Or with a few adjustments, these:

Whats great, is that by specifying an background-image or background-color first, if a browser (ie6 for example) can’t recognise the values, it will just fallback to a value it does recognise. In this case the background-image with a url.

Ok, but what does it all mean?

You will notice the syntax differs between Webkit (Chrome + Safari) and Gecko (Firefox). This is because the gradient specification is not an official CSS3 standard and it purely based on the web browsers own implementations.

The big difference between FF and Safari is that Firefox uses a “point and angle” system while Safari uses a “point to point” system in applying the gradient.

This is Mozilla’s implementation:

-moz-linear-gradient(<point> || <angle>, color-stops)

and the Webkit Browsers:

-webkit-gradient(linear, <point>, color-stops)

Translated:

Point or Angle. Specifies the starting point of the gradient. The value can be in percentage or pixels or left, center, right. In firefox angles are also accepted. i.e. 45deg

Color-Stops. Color which the gradient should transition to/from. If more than two colors are specified with no specific stop, the transistion will be smooth and even.

Firefox uses the syntax <color> [ <percentage> |  <length> ]. You can use percentage (0-100%) or length (0-1.0). This is defined following the color name. If no value is present the color will just fade evenly across the element.

Safari uses the syntax color-stop(value, color) to define color stops. It can be a percentage or valure like Firefox. There are also shorthand functions with go from(color), to(color).

So, for example, in Safari the following code would make a gradient that went softly from the bottom-left corner to the top-right.

-webkit-gradient(linear, left bottom, right top, from(#62a3ac), to(#cbe5e8));

and in Firefox it would be like this:

-moz-linear-gradient(left bottom 45deg, #62a3ac, #cbe5e8);

Great, but is it ready?

Yes. However you have to be aware that currently it is not quite perfect yet. The main reason for its adoption is 1. Not having to use images (less HTTP requests) and 2. You can easily update colors and styles on a site without having to open an image editor.

Now because you will probably want  to keep consistency in the design across browsers, you will have to still create an image for Internet explorer. Whilst firefox will ignore the image completely if you have specified a gradient after it, for some reason Safari still downloads the image, but doesn’t use it. This kind of defeats the purpose of having a CSS gradient, because you are not actually saving time or server requests. If you think you can get away not using a fall-back image at all then just use a solid background-color (which is what Internet Explorer users will see).

But it is still a viable solution depending on your circumstances and the brower market share of your audience. It is the same with most CSS3 specs at the moment, if you can successfully pull it of in your website, then by all means, go nuts.