Gradients Without Images

(This page includes illustrations that benefit from a desktop monitor's width. When you stop supporting MSIE 7 and 8 you can replace these with CSS3 gradients.)

In the past, background gradients have been used, relying on HTML's ability to repeat a background image horizontally or vertically. A better technique is to use JavaScript. This article uses no images; none of the gradients is in the background. The "Show Me!" graphic below uses four JavaScript gradients:

The gradients above are illustrative and decorative. As a guess, those of you with more than an ounce of designer in your blood are thinking, "I can do better than that!". The contest is officially open. Send me your best 360,000 pixels (600x600 or similar) and the winners will appear at the end of this article with appropriate attribution and back links. (Graphics are not accepted. Engineers: all the code you need for your own gradients is included in this page.)

For now, since your author is a deep-dyed geek, we'll go on to performance.

Gradient Performance

You clicked "Show Me!" and you got instant gradients. They were actually drawn as the page loaded. The button click just toggles their visibility. Any self-respecting frontend engineer can think of other ways to get instantaneous response from JavaScript gradients. The next example uses no tricks. It draws the gradients after you click the button.

The gradients at the sides are 100 pixels wide (each). They are both made up of 100 divs, each div is 600 pixels tall, one pixel wide and just slightly different from its neighbors in color. Similarly, the central gradients are each made from 300 1-pixel-tall, 400-pixel-wide divs. There are 800 separate divs in this decoration. Can you do this in real time? Click the next button to see.

(For a pure test, set your screen zoom to 100%. Hold the button down. Time from the button release.)

I use a slow old machine for speed tests. It says that these 800 divs take almost no time to paint. Performance is not an issue. (Minimizing the time the server spends downloading images is an issue. JavaScript gradients are a lot faster than Photoshop background gradients.)

Practical Gradients

Of course, this is an article about gradients. Nice, big, colorful gradient decorations are fine, here. But what about on your sites?

Unless you are selling gradient art you cannot waste hundreds of thousands of pixels. Let's look at some places you can use gradients to enhance, not replace, the message you want to convey.

Gradients Behind Content

If you stick to light colors, gradients work well behind content. Do me a favor, please? No white text on dark gradients. I grew up in a world of white text on green screens. I do not miss it!

You did notice that the gradient here merges seamlessly with the background, didn't you? (That merge is somewhere in the first paragraph. I can't see it, no matter how hard I look.)

Note to frontend engineers:

To get text (and headings and other content) on top of my gradients, I use a zIndex greater than zero for the content. Remember that your gradient isn't a single DOM element; it's a bunch of divs, zIndex unspecified.

If your content is in block-level elements with specified, positive zIndices, it will appear on top of your gradient. If your content elements have specified backgrounds, they will hide your gradient.

Gradients Behind Content, Encore!

You can use very subtle gradients, such as the very light blue to light blue above, for effects that your visitors may feel but not notice. I expect to see some very slick work!

You can also use less subtle, multi-colored combination gradients, such as this one, for effects that absolutely no one will miss. I expect to see some very ugly work, too.

The gradient to the left shows a ham-fisted approach. I hope it also triggers your creative juices. (Matching that blue with the color of cured ham is not part of the color theory you've learned? Oh.)

Seriously, if you've been using color wheel theory, gradients demand a lot of new thinking. I suspect part of this thinking will take pie slices of the color wheel for gradient combinations (or, maybe they are gradient combinations already). Somebody help me out!

Different gradients morphing into each other, as in the decorative ones that started this article, open a huge universe of design possibilities. Some of those design possibilities are worth exploring.

Menu Choices

North

South

East

West

Menu choice buttons. Useful? Sure. Exciting? You judge.

Gradient Menu Choices

Gradient menu choices are not new, but creating a PSD and then cut/pasting into HTML is not fun for the designer and it's not fun for the frontend engineer. These menu choices, since they are instances of a gradient menu choice class, are a piece of cake.

Nicer looking? Definitely! But that's not all. A plain hover is shown here (every gradient line turns white). Would you like a hover to flip the gradient? Go for it. You control appearance for each of the 20 divs that make up the gradient background here.

Oh No! More Gradient Choices

You have complete control over the content of the gradient when first shown, on hover, on click (not to mention onmousedown, onmouseup and onmouseout). To demonstrate this I coded an example that painted every second div in the gradient. I painted them red. It was so awful that I threw it out, not willing to even show it.

Again, this was not to suggest a good idea. It was to show you what control you have in the hope that you'll come up with better ideas for using this control. Beware, though. Painting every other line red is not a good idea.

Don't Feed the Geeks?

The sign at the zoo, "Don't Feed the Bears," is one you should obey. There is no sign anywhere I've been that says, "Don't Feed the Geeks." Designers: this is important.

You will never get the best results doing gradients in Photoshop. You get the best results doing gradients in situ in your web pages. An approximate design ("gradient, starting a bit lighter here") is a good start. Asking the engineer to show you a page in process, and to fiddle with the precise colors while you watch, is a perfectly reasonable request. The engineer is only adjusting a single color specification.

If you are using a bunch of gradients, asking the engineer to work with you over lunch may work, too. Designer: you bring lunch (roast beef on rye? veggie salad? Ask!). Engineer: you bring patience. (Designers are perfectionists and can be very slow to make up their minds—showing two versions of one page side by side is a Good Thing.)

I'm looking forward to your contest entries!

Feedback: MartinRinehart at gmail dot com.

# # #