## Overview

ClassyGradient is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to add gradient generators in your web apps and sites. Smart and fully cutomizable, it is suitable for any type of use : CSS generators, HTML5 canvas applications, live usage.

- Unlimited gradient points.
- HTML5 Browsers compatible (IE9 +).
- Generate CSS code.
- Customizable by CSS.
- Can easily be combined with HTML5 canvas.
- No server files, only Javascript & CSS.

## Instructions

First you need to include the jQuery library, the jQuery UI library and the ColorPicker plugin, since ClassyGradient is a plugin that depends on those. You can download jQuery from the jQuery website or link it directly from the Google CDN.

    <link rel="stylesheet" href="css/jquery.colorpicker.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="js/jquery.colorpicker.js"></script>

Secondly, you need to include the jQuery ClassyGradient javascript and CSS files into your page. You can do it by adding the code below to your page.

    <link rel="stylesheet" href="css/jquery.classygradient.css" />
    <script src="js/jquery.classygradient.js"></script>

Next, you create the element that you want to trigger the gradient on.

    <div class="gradient1"/><div>

As the last step, you trigger the ClassyGradient() function on the element you just created. For example, we trigger the function on the div with the class gradient1.

    $('.gradient1').ClassyGradient();

## Options

gradient - default gradient points.

width - gradient preview width.

height - gradient preview height.

point - gradient point size.

target - gradient destination.

orientation - gradient orientation, can be horizontal or vertical.

tooltip - tooltip background gradient points

onChange - event fired on gradient changes.

onInit - event fired on initialization.

getArray - return the gradient points as an array.

getCss - return the full gradient generated CSS code.

getString - return the gradient points as a string.

setOrientation - change gradient orientation.

update - trigger this method if you're updating parameters after plugin init.

## Demo

### Basic

    <div class="gradient1"></div>

    $(document).ready(function(){
        $('.gradient1').ClassyGradient();
    });

### Customized

check out this hefty (and girly) gradient

    <div class="targetEl">check out this hefty (and girly) gradient</div>
    <select id="orientation" onchange="changeOrientation();">
        <option value="horizontal">Horizontal</option>
        <option value="vertical" selected="selected">Vertical</option>
    </select>
    <div class="gradient2"></div>

    $(document).ready(function() {
        $('.gradient2').ClassyGradient({
            gradient: '#ebf1f6 0%,#ff9cff 40%,#ff6aff 61%,#ff2db7 100%',
            target: '#target',
            tooltipGradient: ' #fceabb 0%,#fccd4d 49%,#f8b500 53%,#fbdf93 100%'
        });
    });
    function changeOrientation() {
        var orientation = $('#orientation :selected').val();
        $('.gradient2').data('ClassyGradient').setOrientation(orientation);
    }

### Generate CSS code

    <div class="gradient3"></div>
    <textarea class="export"></textarea>

    $(document).ready(function(){
        $('.gradient3').ClassyGradient({
            gradient: '#00ffff 0%,#008900 30%,#f00044 70%,#0042d2 100%',
            onChange: function(stringGradient,cssGradient) {
                $('.export').html(cssGradient);
            }
        });
    });