CSS Gradients for Dummies
Recently, I have started experimenting with CSS gradients. It is flexible, fast, requires fewer server requests, and on and on. The bad is that it’s not supported by everyone yet, think of it as progressive enhancement, so it’s not really that bad.
The problem I had when trying to use CSS gradients is that the syntax is confusing and the examples on webkit.org were not clear and were fairly complicated. What I wanted was a simple starting point to, well, start from.
I’ll post the example then I’ll explain it in more detail so you know what’s what.
.item {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #ccc),
color-stop(1, #333)
);
}
So first we define the gradient using -webkit-gradient().
The second line defines whether the gradient is linear or radial.
The third line defines where the gradient starts, the forth where it stops, you can use left, right, top, bottom, percentages etc (any way you would position a background image. The above example is a vertical gradient, lighter on the top and darker on the bottom. If you want a left to right gradient you would change it to:
... left top, right top, ...
Color-stop defines the colors and the position of the colors, the first being the starting position and color, the second being the ending position and color. Note that the position can be percentages or a number 0-1, 0 being the starting point, and 1 being the ending point. In the above example we have a starting position defined as 0 and the ending position defined as 1, but we could make them .5 which would be the center. Note: You can define as many color-stops as you want, each with a different color but I wanted this example to be as simple as possible.
The below is an example of what the gradient would look like in a webkit browser (Safari or Chrome):
Wait, what about Mozilla browsers?
So, Firefox 3.6 will support, -moz-linear-gradient and -moz-radial-gradient which works just like the -webkit versions except you do not have to define the “linear” or “radial” in the CSS (since you do this with the name). Firefox 3.6 is still in development but you can download and check out other changes here.
Wait, wait, what about Internet Explorer?
Tough luck, it won’t work. Luckily, gradients are not necessary to a good browsing experience (as good of browsing experience you can get in IE). This folks is what’s known as progressive enhancement. Enhance modern browsers while still providing decent, usable sites for those using outdated browsers.