background colors of table cells

[crystalb24]

I am currently using a table with a background color in specfic cells. I'd like to use a gradient fill effect instead of a flat color in those cell but I'm not sure how to do that. Advise anyone?

~Crystal
Click here (

http://www.freeiPods.com/default.aspx?referer=7003325)

for a free iPod

 

[Vragabond]

<td style="background: url(mygradientpic.jpg) no-repeat;">This td has gradient fill</td>

You should move the style information in an external stylesheet when you are satisfied with the result and use classes.

 

[BillyRayPreachersSon]

Here's a good article from irt.org (which unfortunately doesn't seem to be updated anymore - it used to be a good resource).

http://tech.irt.org/articles/js162/index.htm

It shows how to build string gradients, although it does require JavaScript... But a fun and little-used technique.

Hope this helps,
Dan

 

[ChrisHunt]

Like Vrag says, you can do it with an image - but make it a repeating one. For example, if you want your cells to graduate from vertically red to blue (which would look disgusting, but for the sake of a code example...)
[ul]
[li]Open your favorite paint package and make an image that graduates as required, the image should be as high in pixels as you think you're likely to need, width doesn't matter.
[/li]
[li]Reduce the width to one pixel and save the image, probably as a GIF - but experiment to see what works best.
[/li]
[li]Code your CSS like this:

.grad {
   background: #0000FF url(/images/grad.gif) repeat-x 0% 0%;
}

[/li]
[/ul]
That way, the graduated image will be repeated horizontally across the cell, filling whatever width it has. Vertically, if the cell is taller than anticipated, the last colour in the graduation (blue in this case) is continued.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd