slayeroffice - web experiments gone horribly awry

11.03.2005 - Cross Browser Gradients

A good friend of mine is working on a book about web development techniques and asked if I could help out with a contribution. I thought on it a bit and came up with what I think is a pretty good hack.

This demonstration details a means to apply gradient backgrounds to elements without using background-images. The start and end colors for the gradients are defined as six character hex values in the class attribute of the element, and no function calls need to be made. The script fires from the onload event, finds the elements with "gradient" in the 0th index of the class attribute and does its thing. More details on the demonstration proper.

This works well in all the modern browsers I have tested in - feedback and suggestions for improvement are welcome.

Comments

Interesting! I took a different approach, generating gradients via CSS, building up to a whole image. Take a look at my demos:

http://www.designdetector.com/demos.php

I think your idea is more practical though.
Posted by Chris Hester on November 22, 2005 @ 4:31 pm

very interesting!!

thanks
Posted by DesignStage.Net on November 23, 2005 @ 12:49 pm

wondering if this could be used to create a circular gradient?
Posted by Rob Epple on February 13, 2006 @ 10:14 am

Comments have been closed for this post.