cross-browser gradient backgrounds without images
Summary
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.
How it Works
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:
Download source file
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".
Summary
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.
How it Works
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>Download source file
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".
0 comments:
Post a Comment