Cross Browser Gradient Background Demoversion 1.0
last revision: 11.03.2005
steve@slayeroffice.com
http://slayeroffice.com
This is a paragraph element containing an em element
Two span elements next to each other:
This experiment allows for gradient backgrounds on elements by defining a six character hex value for the start and end color as part of the class attribute. No background-images are required. This has been tested and verified to work in MSIE6, Firefox 1.0.7, Safari 2.0.1, Opera 7.5 & 8.5 on Windows 2K, XP and OS X.
The behavior attaches itself to the onload event and walks through the DOM looking for objects with a class name containing the word "gradient" in the 0th position of the string.
Upon finding an object that matches the criteria, it is added to an array which is returned to the caller upon completion. The class attribute of the object is then split into an array which assumes that the starting color will be in the first index, the end color in the second and the vertical or horizontal designation in the third.
The following would result in a white to black vertical gradient:
<p class="gradient ffffff 000000 vertical">hello world!</p>If the browser is MSIE, its proprietary gradient filter is used.
Other browsers require that a series of div elements be created and set as children of the element. The innerHTML of the parent element is copied, placed into a div or span element (depending on if the display of the element is block or inline), removed and replaced with the div element to ensure a higher z-index than the div elements that create the gradient.
The div elements are appended to a documentFragment object and then appended to the parent element for maximum speed of execution. Their background-colors are determined by a series of functions that determine the color transitions required to get from color[x] to color[y], and are based on this experiment from June 2004.
Since the javascript only cares about the first four class names in the class attribute string, additional class names specific to your document can be appended to the end, i.e. class="gradient ff0000 0000ff vertical footer".
The only requirements of the objects to recieve a gradient background are that they be relatively or absolutely positioned so that they may contain absolutely positioned div elements.
Currently, child elements of parents that are set as gradient can not also be gradient.
No calls to javascript need to be made. Simply include a reference to the source in the head of your document and assign the class names as described.
Javascript Source: http://slayeroffice.com/code/gradient/gradient.js
CSS: http://slayeroffice.com/code/gradient/gradient.css
Cross Browser Gradient Background Demo