The Manual

Setting it up.

The script is usually applied to blocks of text, such as in headers. It is most compatible in a fixed-width container. To start off, set up the font styles and positioning using CSS rules just as you would normally.

Add this Code

Copy and Paste.

First, somewhere in the <head>, call up the jQuery file and the Codename Rainbows script. For more information about this, see the jQuery documentation.


<script src="lib/j/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="lib/j/rainbows.js" type="text/javascript"></script>

Add some kind of class or ID or way to target the elements you want to give gradients, highlights or shadows. Keep in mind this only works on text.

Initializing

The JS Snippet.

By default, adding the script processes anything with a class 'rainbows' and gives it the default effect. New instances can be created with the following parameters, which can be added at the end of the rainbows file or in a separate file (which we recommend), or inline in the document within a <script> tag (if it is very page specific, like in our demo).


	rainbows.init({
		selector: '.your_selector_here',
		highlight: true,
		shadow: true,
		from: '#555555',
		to: '#000000'
	});

The color at the top is the 'from' and the color at the bottom is the 'to.' Keep in mind that it applies to the height of the element, so the gradient might not be as steep, especially on large line-heights or text without any descenders.

The order of the declarations is not important, just be sure to not put a comma after the last attribute or the sky will fall on your head. And it will crash the JavaScript in IE (but won't be noticeable in other browsers).

The default .rainbows initialization is in the JavaScript file and can be changed or removed if necessary. Alternately, you can just create new instances depending on what element and style you need.

Styling

The CSS Snippet.

Add this CSS to your stylesheet or as its own stylesheet included at the end. We generally split them all up and just include them via PHP, but to each their own.


.rainbow {
	background: transparent;
	display: block;
	position: relative;
	height: 1px;
	overflow: hidden;
	z-index: 4;
	}

	.rainbow span {
		position: absolute;
		top: 0;
		left: 1px;
		display: block;
		xwhite-space: nowrap;
		}
	
	a .rainbow span { /* For within floated elements. */
		white-space: nowrap; 
		}

.rainbows-highlight {
	color: #fff !important;
	display: block;
	position: absolute;
	top: -1px;
	left: 0px;
	z-index: 2;
	}

.rainbows-shadow {
	color: #000 !important;
	display:block;
	position: absolute;
	top: 1px;
	left: 2px; /* can be one or two depending on 90 or 135 degree global light */
	z-index: 3;
	}

.back .text .rainbows-shadow {
	color: #fff !important;
	opacity: 0.3;
	}

Check out the white paper to learn more about what exactly the code does, but basically this CSS gives the necessary styling to the elements generated by the JavaScript. Without it you'd just have a bunch of repeated text—not as stylish.

That's all Folks!

We hope it works.

That's really all there is to it!

You can leave a comment or see the online discussion at the online page.