Nice guide. All of my future styles will be using CSS3 gradients before any image fallbacks, for some of the reasons you listed here.
However, there are still a number of problems with CSS3 gradients that have prevented me from eagerly jumping on top of them.
First of all is the fact that most browsers do not dither CSS3 gradients. This doesn't seem like such a huge problem at first, but can actually be a deal breaker in many cases. Many designs will use a very subtle CSS3 gradient to add a slight sensation of depth or shine. The problem is that because the two color stops are not very far apart, and the gradient is not dithered, color banding is quite easily visible in the gradient area, which is unacceptable. You end up more with a series of stripes rather than a cleanly graduated area. I'll use an image over CSS any day if banding is going to be an issue.
The second issue is browser performance. "What?" you say. "CSS gradients will
improve performance." Yes, that's true when you're talking about
loading performance. The other area of website performance which I consider just as important, if not more so, is the rendering performance of the browser on any given page. The simple truth is that complex CSS effects like gradients, drop shadows, rounded corners, transitions, filters, etc. put a lot of computation duty on the browser which was previously handled by an image editor when the image was exported. Combine this with the fact that most browers are not GPU-accelerated, and lots of complex CSS can slow on-page performance to a crawl.
Perhaps it's because I am a video gamer and I am very sensitive to changes in FPS (frames per second), but when complex or poorly-coded CSS brings a web page from rendering at 60 fps (a buttery smooth experience, technically as smooth as the image can be rendered on most modern monitors) down to 20 fps or lower, it's annoying and can make the site feel "slower" than a site that renders much faster but took twice as long for the initial load. Considering that most of a user's time on a site is spent interacting with the loaded page rather than waiting for it to load, I'm surprised that more attention hasn't been paid by browser makers to the rendering performance of their browser. Is it really worth it to shave 1oo-2oo ms off the load time of your page if it means that your site feels very "laggy" when the user is actually using it?
The third "issue", in my mind, is that CSS gradients as they stand today don't bring any design advantage compared to the transparent PNG approach that I used with Flexile. Both approaches allow the style to be easily customized by simply changing the base color, as the transparent overlay maintains the graduated appearance. However, they both have the same drawbacks, mainly that you can only overlay white, black, or some shade of gray in between. As a result, this inherently washes out the color in the gradient. The ideal method would be a way to overlay an increase in luminance, allowing you to create a gradient overlay that increases brightness without decreasing color saturation. In other words, we need blend modes for the web. Adobe
has advocated for doing exactly that, but it's still a long way off. However, in 10 years from now, I'm willing to bet that images will be entirely out for the UI design of sites. With @font-face, CSS gradients, rounded-corners, drop-shadows, SVG icons, and eventually filters and blending modes, as well as the improvement of browser rendering performance (which I anticipate will be the next performance war, after Javascript), images will be relegated to what they were originally intended for: displaying photographic content.
Intelligent CSS extensions like SASS and LESS, combined with CSS3 gradients, could provide a stop-gap solution for the time being. SASS has color functions like hsl(), lighten(), and saturate(), so it would be theoretically possible to do something like
linear-gradient(top, @myColor, lighten(@myColor, 20%));. It's been goal of mine to implement a SASS parser that slots into XF's template compilation process, but I have neither the time nor the skills. If it did eventually get supported, the fact that XF already compiles the templates means that themeing possibilities would get blown wide open.
So there's my 2¢ on CSS3 gradients.
but that's my preference.
