CSS3 gradients can make it possible to replace background images, avoid unnecessary http calls, and, importantly, boost page-load times.
According to data from Google, Amazon, and RichRelevance, page load times of more than a second (or even 100 milliseconds by some reports) may have an effect on sales conversion rates. As an ecommerce developer, it is your job to help clients, or your company, improve sales. So page performance should be very high on your list of priorities.
CSS3 gradients can help boost performance because they can stand in for backgrounds or design elements that might have previously used images to produce. I want to be careful not to overstate the problem or the solution. Using a nice background image might be exactly what your project needs. But it is possible that you can get a similar, if not identical, effect using nothing but CSS, and thereby improve site performance.
CSS3 Gradients
The World Wide Web Consortium has been discussing CSS gradients since at least 2000, and there has been a draft standard describing CSS gradients for something like six years. But it has only been recently that browser makers have begun to implement CSS3 gradients in a meaningful way. Even still, there is no general support of the would-be standard.
In spite of this, it is possible to use vendor-specific code (hacks) for Firefox, Chrome, and Safari.
In July 2010, I introduced the Ecommerce Developer audience to CSS gradients in general, in "Three Techniques for Cross-Browser CSS Gradients." In this tutorial, I am going to describe how to use CSS3 gradients to produce a "Web 2.0" glossy button effect without using any images. I will describe some of the points from the W3C draft for CSS3 gradients and then explain the specifics for making this effect work in most modern browsers, too.
The CSS declaration used in the example above follows the current W3C draft for CSS3 gradients (although it is executed in Firefox; more on this below).
linear-gradient(0% 50% 90deg, #000, #575757 0%)
Position the Gradient
The style description is actually made up of three separate agreements. The first agreement describes the gradient's position, has two parts, and is using the options and syntax from CSS' background-position attribute.
This first agreement can be a keyword, like "top," a percentage pair, a degrees specification, or a combination of options, which is what I used in the example.
linear-gradient(0% 50% 90deg
The first percentage in this agreement describes an x-axis coordinate as a percentage where 0 percent is completely on the left side of the x-axis and 100 percent is completely on the right side of the x- or horizontal-axis.
The second percentage similarly represents a position on the y-axis where 0 percent is completely at the top of the element and 100 percent is completely at the bottom. In my example, if I change this second percentage to 100 percent, the black portion of the gradient will vanish altogether since I would be positioning it complete at the bottom of the element.
linear-gradient(0% 100% 90deg, #000, #575757 0%)
To get my "glossy" effect, I am creating a gradient with a hard edge that gives the illusion of shine or shimmer. Notice that the black color starts half way down the image just as the "0% 50%" declaration indicates.
The next portion of the first agreement in my "glossy" effect gradient is an angle. As mentioned above, the W3C allows for a gradient position to be a keyword or percentage, an angle, or some combination. For my buttons, I am using both the percentages and this angle declaration, meaning that the gradient will start at the position described by the percentages and continue across the element at the angle described.
linear-gradient(0% 50% 90deg,
By specifying "90deg," the gradient will go from the midpoint of the element straight down to the bottom. If I had set this declaration to "270deg," the black portion of the button would have gone from the midpoint of the element to the its top.
Color Stop
The second parameter in my CSS3 gradient declaration is the first color stop, "#000." According to the draft standard, this color stop consists of a color declaration and nothing else. Some vendor implementations will allow an option position of 0-to-100 percent. In all cases, if nothing is specified, this first stop's position is 0 percent.
The third agreement or parameter is also a color stop, but one that includes a position "0%," meaning that this color should start at the top of the element.
Change the second stop's position would result in the gradient for this color starting in a different position. For example, if I set it to "100%," I would get a more subtle gray fade that might look entirely black at first glance.
Setting this value to "50%" would make the gray portion of the fade seem brighter since the gradient would be starting at the middle of the upper portion of the element.
Combining a gradient position and two color stops, I was able to produce my two-tone buttons. But using this exactly as described would not actually work, since as I am writing this article no browser vendor supports the draft standard as such, rather the leading browsers support CSS3 gradients in their own special way.
CSS3 Gradients in Most Browsers
To apply the style description above in Firefox or any browser using the Gecko engine, simply add the vendor prefix "-moz-."
background-image: -moz-linear-gradient(0% 50% 90deg, #000, #575757 50%);
The gradient will function exactly as described above.
Webkit browsers Chrome and Safari use a somewhat different syntax for CSS3 gradients.
background-image: -webkit-gradient(linear, 0% 50%, 0% 45%, from(#000), to(#575757));
First, the Webkit engine does not use "linear" in the attribute name, instead accepting the type of gradient as the first agreement of the declaration. Next is the position for each stop and then the color range.
Opera does not yet support CSS3 gradients, but has said on its Twitter page that it would start to do so soon.
Related Articles
- Three Techniques for Cross-Browser CSS Gradients
- Graphic Styles and Appearances in Illustrator
- Tutorial: Making Web Button Graphics in Adobe Photoshop CS4, Part One
