Color fades and transitions in backgrounds with CSS

A easy effect that can bring the presentation of your page into the 21st century. CSS allows more control over the positioning and assigning of backgrond images. Also, as the image is called from the CSS file it's self, the search engines will not index or waste time on your background image files.

Basically it's as easy as this:

1: Assuming you want to create a backgound that fades from black to purple, go into Photoshop or what ever graphics processing software and create an image with the desired colors, and make it 1 pixel wide. If you have hassles doing this, you're reading the wrong blog.

2: In your CSS file, create a class with the following attribute (Assuming you are assigning it to a table division element with the class name of "fade") the CSS should look like this:
td.fade { background: url(images/bar1.gif) 0 100% repeat-x;}

The URL is the URL of the 1px wide image that will be called to render the background.
The "0 100%" signifies the initial starting position for the rendering of the background. 0 (The first figure) is the starting position on the X axis, 100% is the starting position along the Y axis. Since I wanted my texture to appear at the bottom of the cell, I set it to 100%. These can be manipulated to achieve the desired effect.
Finally, the repeat-x; signifies that the image will be repeated for the entire space of the cell, along the X axis, that is left to right. If you wanted to have a cell with a horizontal color transition, you would create an image 1px tall with the desired color transition, and specify repeat-y;

It's pretty simple, doesn't have too much effect on load time for the page, and can help make extremely bland pages not look like they were created in the 80's. Because the image is only 1px wide, it only has to be a few bytes big. Use websafe colors and save them as GIF files.

Finally, to make it work in the HTML, when you define your table division, assign the class to it, for example:
<td class="fade">....</td>

It's as simple as that.