This is a demo on how to create gradients using xsl and css.

There are 2 example files

gradient.xsl

gradient.xml

that should open in a browser window. Just File/Save As.

This arose from a question on the Mulberrytech list "Hexadecimal Arithmetic" by Maulik Modi.

I have the following snippet of my XML data:

<SNIP />

I want to present this in a table and that's done. Now I want to color code each table row depending on the value of the "level" attribute. That's done. Now I want to give each row a different gradient of the same color depending on the value of the "level". The value of the level ranges from 1-10. I wanted to take this and use it with hexadecimal arithmetic. Does anyone know how?

I replied

It is tricky in hex so why not stick to decimal.

XSL can't do hex arithmatic although Nate Austin came up with a solution but as he admits it gets ugly.

As you can see if you look at the xsl code the best way to do it is with the css rgb() function. This allows you to give decimal values for any colour.

{

color: rgb(255,0,255);

background-color: rgb(0,255,255);

}

The code I came up with to solve this is a recursive template which changed the colours ($red $green $blue) on each call. It then uses the following code to add a "style" attribute to a div

<div>

<xsl:attribute name="style">

background-color: rgb(<xsl:value-of select="position() * (255 div (count(//parent)))" />, 255, 255);

</xsl:attribute>

</div>