January 10, 2012
As I’m about to release my new site, I thought I’d share my experiences with CSS3 gradient during the site’s development.
The first thing to say is that they can be tricky little things to work with. Support is currently provided via vendor prefixes (-moz, -webkit, -ms, -o). Since Safari 5+ the syntax has been standardised across all browsers for defining them:
background: -vendorprefix-linear-gradient(top, #170d42 0%,#6e80ff 50%,#000000 100%;
However, if you want to support earlier versions of Safari you’ll need a different syntax:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#170d42), color-stop(50%,#6e80ff), color-stop(100%,#000000));
You could work out the code for a gradient yourself, but you’ll probably find it easier to use a generator, such as ColorZilla’s Ultimate CSS Gradient Generator.
Where you may run into problems, as I did, with CSS3 gradients is when using them for backgrounds in sites using a responsive design approach*. With a responsive approach the content reflows as the browser window size changes. Unfortunately, CSS3 gradients are rendered once, when the page renders. This can leave the gradient too short or too long for the page content. Sometimes, in certain browsers, it can tile in a very ugly fashion.
If you refresh the browser *after* re-sizing the browser window, the gradient will re-draw correctly. Now, we don’t want to force a refresh of the page, but we can force the browser to re-draw the background by using JQuery.
JQuery to the rescue. As ever.
Using the Window.resize event in JQuery we can re-set the background property of the element (this site uses a CSS3 gradient on the background property of the html element):
jQuery(window).resize(function()
{jQuery(“html”).css(“background”,-moz-linear-gradient(top, “#170d42” “0%”, “#6e80ff” “50%”, “#000000” “100%”), -webkit-gradient(linear, left top, left bottom, color-stop(“0%”,”#170d42″), color-stop(“50%”,”#6e80ff”), color-stop(“100%”,”#000000″)), -webkit-linear-gradient(top, “#170d42” “0%”,”#6e80ff” “50%”,”#000000″ “100%”), -o-linear-gradient(top, “#170d42” “0%”,”#6e80ff” “50%”,”#000000″ “100%”), -ms-linear-gradient(top, “#170d42” “0%”,”#6e80ff” “50%”,”#000000″ “100%”), linear-gradient(top, “#170d42” “0%”,”#6e80ff” “50%”,”#000000″ “100%”), “#170D42\9”);
});
The code above may cause some text editors to huff and puff about a syntax error (Dreamweaver, I’m looking at you), but you can ignore this. The standard JQuery syntax for .css() requires speech marks around the value of the property, but if you do this with the list above the code will fail. You do, however, need to put speech marks around the hex and percentage values to avoid problems with invalid characters.
Thus, our gradient is re-drawn to match the size of the html element. There’s a slight bug in Firefox, in that the gradient doesn’t re-draw to the full extent of the html (Safari re-draws correctly).
*I don’t regard this site as being truly a ‘responsive site’, more optimised for devices using responsive approaches.