gradient 1.0

What does it do?

The gradient plugin adds a dynamically created configurable gradient to the background of an element without the use of images.

When should I use it?

The gradient plugin should be used when it makes sense to progressively enhance the UI with dynamic gradients on the fly without images.

How do I use it?

To use the gradient with default options/settings, just call gradient on a jQuery collection of elements.

$('.gradient').gradient();

The gradient plugin is requires the Dimensions plugin.

With its default options/settings the gradient will fade from black (000000) to white (FFFFFF) horizontally the height of the element. To change the color just specify a 'from' color and a 'to' color in hex.

$('.gradient').gradient({ from: '003366', to: '333333' });

All the options/settings are described below.

from

This is a color to start the gradient with. The color should be specified in hex. The default color is black (000000).

$('.gradient').gradient({ from: '003366' });

to

This is a color to end the gradient with. The color should be specified in hex. The default color is white (FFFFFF).

$('.gradient').gradient({ to: '333333' });

direction

There are two possible directions for the gradient: horizontal and vertical. Horizontal fades from top to bottom and vertical fades left to right. The default is horizontal.

$('.gradient').gradient({ direction: 'vertical' });

position

The gradient is positioned top and left within the element by default. To change the position of the gradient, just pass a string that has either top, bottom, left or right.

$('.gradient').gradient({ position: 'bottom' });

length

By default the length of the gradient is determined by the width or height of the element (depending on direction) To change the length just pass a number representing the number of pixels the gradient should be in width or height (depending on direction). To use the default calculations just set length to null.

$('.gradient').gradient({ length: 25 });

How does it work?

The gradient plugin adds a series of div elements positioned behind the contents of the element. These divs are given a background color and positioned according to the settings. The number of divs varies based on the length but there is never more than 100 used to make the gradient. The color methods and original idea belongs to Steve over at slayeroffice.com.

Check out the test page to see the plugin in action.

Where can I get it?
  • 1.0 zip from the gradient project page.
  • Latest SVN: http://jqueryjs.googlecode.com/svn/trunk/plugins/gradient/
  • Tagged Versions in SVN: Latest SVN: http://jqueryjs.googlecode.com/svn/tags/plugins/gradient/

Don't forget to get the latest version of the Dimensions plugin.

Suggestions? Bugs? Patches?

Feel free to make any suggestions, bug reports or add any patches via the project page.

The gradient plugin is based on the work done by Steve over at slayeroffice.com and authored by Brandon Aaron (http://brandonaaron.net/).