Gradient Backrounds in Table Cells using Code!

Jeff Lange

Active member
OK, I need to know how to do this! Its making me mad now, lol.

I need to do a gradient backround on a table's cell, going from one color to another, only using code, how do i do it!?!?!?!

Any help would be appreciated VERY VERY MUCH!!!
 
you mean in HTML, without using a graphic? It's possible to do using a lot (A LOT) of <tr><td> tags, but you wouldn't be able to put anything on there without breaking the gradient (using CSS positioning you could I guess). You wouldn't really save anything bandwidth wise either because a simple GIF or PNG to make a gradient could be made in under 200 bytes. There are ways to adjust the Hues/Lightness/Saturation levels of a graphic file by using the GD library (PHP) - why do you need a gradient made with code alone?
 
Well thats not really what I was looking for as an answer, but here's why I need it:

I want to have a backround thats shaded, but on a table cell that is variable in height, so if I do a graphic, It will tile.

Actually, just being able to tile horizontally only would be fine (as a backround image)

Can you do that the same way as tiling horizontally on a page backround?
 
yeah <td background="yourgradient.png"> will tile horizontally, then wrap around again if it needs to. For your case, to make it so that the <td> can get quite large without appearing to tile vertically in your <td> you can just use a large-than-what-you-need image, such as the one I used for the column headers with the DarkRage theme, ie:
categorybg.gif


You can also use CSS to tile vertically, prevent wrapping, position the background, etc...
Code:
background-position: [ top | center | bottom | left | right ];
background-image: url(yourgradient.png);
background-repeat: [ repeat | repeat-x | repeat-y | no-repeat ];
background-attachment: [ scroll | fixed ]

you can use shorthand for that of course
Code:
<td style="background: left url(gradient.png) repeat-x;">Some Text</td>
The gradients you see in the Forum themes I did are all done using a similar method to that.

I'm actually working on tutorials related to this type thing, don't know if/when it will ever get done though.
 
Well I am familiar with some of that, as I had to do that while working on the graphics for DH.net, anyways, I can't just do a larger image, because the size is VERY variable, so like between 1600 and 3000 pixels high, anyways, i'll use CSS, thanks.
 
Back
Top