[thelist] Re: Creating Gradients with CSS or HTML

Tony Brandner tony.brandner at serebra.com
Thu Mar 28 12:33:00 CST 2002


You could always apply some algorithm to a colour code... resulting in a set
of gradient colour values.

Then, using a transparent one pixel spacer image, create a bunch of rows,
colouring each background with the colour. It would appear to be a gradient.

I don't personally know what the algorithm would look like, but we use a
similar technique to create a small horizontal gradient bar on our sites. We
get the colours manually, however.

The code ends up like:

<tr><td class="depth1" height="1" colspan="2"><img src="images/spacer.gif"
height="1"></td></tr>
<tr><td class="depth2" height="1" colspan="2"><img src="/images/spacer.gif"
height="1"></td></tr>
<tr><td class="depth3" height="2" colspan="2"><img src="/images/spacer.gif"
height="1"></td></tr>
<tr><td class="depth4" height="1" colspan="2"><img src="/images/spacer.gif"
height="1"></td></tr>
<tr><td class="depth5" height="1" colspan="2"><img src="/images/spacer.gif"
height="1"></td></tr>

and the stylesheet is:

td.depth1 {	background-color : #FBCBA0;}
td.depth2 {	background-color : #F9AD6B;}
td.depth3 {	background-color : #F79239;}
td.depth4 {	background-color : #AF6828;}
td.depth5 {	background-color : #3F250F;}

tonyBrandner
Research & Development - Serebra Learning Corp
http://www.serebra.com
(604) 592-0552 x230

"Whose cruel idea was it for the word "lisp" to have an "s" in it?" -
Stephen Wright




More information about the thelist mailing list