Works of Time

This is the third installment in the ‘Making of Works of Time’ series and will focus on CSS gradients. As I mentioned earlier in the post about version 3.0 I wanted to use as few images as necessary for styling purposes. In version 2.0 I was using two images as background for the header, navigation, footer and content (see below). With the CSS3 techniques box-shadow and gradients I’ve replaced them with a couple of lines of CSS. In this and the upcoming post I’ll demonstrate what was needed to achieve this.

The issue with CSS gradients is that all browsers use another form of implementation. Therefore we’ll need to apply vendor prefixes at this moment, just like with CSS3 transitions. Furthermore, Internet Explorer uses the filter technique instead to achieve the gradient in IE6-9. To make the gradient work in IE6-9, Firefox, Chrome and Safari you’ll already three lines of code.

This is almost impossible to memorize and therefore I use and advice the following generator: Ultimate CSS Gradient Generator from ColorZilla. It not only outputs the gradient for almost all browsers, but also has a Photoshop-like editor to create the gradient itself. It also adds a fall back for older browsers (background-color) and integrates the official W3C implementation: the gradient will still work once all vendor prefixes have been made unnecessary and removed.
 

Implementation

There are three different gradients used on the new website: the header, sub- and main navigation and the footer. I say different, but they only differ from each other in the colors that are used. Below is the code used for the header:

/* Old browsers */
background: #eeeeee;

/* FF 3.6+ */
background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%);

/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee),
color-stop(100%,#dddddd));

/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* Opera 11.10+ - the best browser there is! */
background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* IE10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* W3C */
background: linear-gradient(top, #eeeeee 0%,#dddddd 100%);

/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee',
endColorstr='#dddddd', GradientType=0 );

 
It’s a lot of code for such a small thing, but the advantage is that you can get rid of some of your images (in my case only one). This means less HTTP requests and an increase in performance/page speed. Every millisecond counts: “Tests at Amazon revealed that every 100 ms increase in load time of Amazon.com decreased sales by 1%.” [source]

Further Reading

• Cross-Browser CSS Gradient on Web Designer Wall
• Speed Up with CSS3 Gradients by Chris Coyier