Rainbow.js

Documentation

← Homepage Github →

Get Started

Download

Its easy, you have to download the rainbow.js main script, once its done, you just have to link it to your documents, after the jQuery inclusion.

<script type="text/javascript" src="path/to/rainbow.js"></script>

And now what ?

Now, you just have to create your first gradient with rainbow.js !

Let's start with a simple structure. We will create regular shapes, a square and a circle.

First, the css

.square{
    width:4em;
    height:4em; 
    margin:.5em; 
}

.rounded{ 
    width:4em; 
    height:4em; 
    margin:.5em; 
    } 
.rounded:before{ 
    border-radius:100%; 
}

And now, the HTML

<div 
class="square rainbow" 
id="gradient_2" 
data-type="linear" 
data-degrees="45" 
data-color="f1c40f-d35400" 
data-opacity="1" 
></div>

<div 
class="rounded rainbow" 
id="gradient_3" 
data-type="radial" 
data-degrees="45" 
data-color="ea6153-c0392b" 
data-opacity="1" 
></div>

will produce :

Gradient headers

You probably noticed the header image, its a simple divwith a background:url('image.png');and Rainbow.js finish the job !

<div 
class="header rainbow" 
id="rainHeader_1" 
data-type="linear" 
data-degrees="45" 
data-color="000-F00" >

    <div class="inner_content">
        <h3>Such gradient, so trendy !</h3>
    </div>                                       
</div>

.header{
 width:15em; 
 height:8em; 
 display:block; 
 margin:auto; 
 background:url(image.png)no-repeat center center; 
 background-size:cover; 
 }
 .header .inner_content{
    position:relative;
    /*By default, the gradient got a z-index of 1, so set the inner content to 2 or more. */
    z-index:2;
 }

Will produce :

Such gradient, so trendy !

Gradient images ? Let's do it

You probably noticed the header image, its a simple divwith a background:url('image.png');and Rainbow.js finish the job !

<div 
class="image rainbow" id="rainImage_1" 
data-type="linear" 
data-degrees="45" 
data-color="3498db-f1c40f" 
></div>

.image{ 
    width:15em; 
    height:8em; 
    display:block;
    margin:auto; 
    background:url(image.png)no-repeat center center; 
    background-size:cover; 
}

Will produce :

Gradient Text (webkit only)

You can find other applications with Rainbow.js, like create a title with a gradient color, Its easy, you just have to wrap your text with a .rainbowclass, and set the attributes to fit to your wish.

<h1 
class="rainbow" 
id="rainText_1" 
data-type="linear" 
data-degrees="0" 
data-color="000-F00" 
>Look ma ! A Rainbow text !</h1>

Will produce :

Look ma ! A Rainbow text !

More gradient texts ?

<h2 class="rainbow" id="rainText_2" data-type="linear" data-degrees="0" data-color="3498db-8e44ad">Gradient on text, webkit only :/ </h2>
<h3 class="rainbow" id="rainText_3" data-type="linear" data-degrees="0" data-color="2c3e50-95a5a6">But still a good feature for rainbow.js </h3> 
<p class="rainbow" id="rainText_4" data-type="radial" data-degrees="0" data-color="c0392b-1abc9c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eveniet a ullam laborum sint libero aspernatur iste beatae odit odio necessitatibus quod neque debitis hic voluptatum. Repudiandae modi nihil exercitationem.</p>

Will produce :

Gradient on text, webkit only :/

But still a good feature for rainbow.js

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eveniet a ullam laborum sint libero aspernatur iste beatae odit odio necessitatibus quod neque debitis hic voluptatum. Repudiandae modi nihil exercitationem.

Attriute : class

On the class attribute, you just have to set the .rainbowclass to your element, and let the magic happen !

Attriute : ID

The ID attribute, is maybe the more complex thing to understand with Rainbow.js

If you want a gradient block, you have to identify it like this <div id="gradient_1"></div>.

But what if you want to use more than 1 gradient block ? Don't panic ! Here is the solution :

                                    <div class="rainbow" id="gradient_1" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_2" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_3" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_4" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_5" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div>

Attriute : data-type

The data-typeattribute can have 2differents values

radial
linear

Attriute : data-degrees

The data-degreesattribute will only work with the linear attribute, it will indicate to rainbow.js by how many degrees you want to rotate your gradient.

data-degrees="0"
data-degrees="45"
data-degrees="95"

Attriute : data-color

With the data-colorattribute, you will specify which colors you want to use for your gradients.

data-color="FFFFFF-000000"
data-color="2ECC71-F1C40F"
data-colors="EA6153-9B59B6"

Attriute : data-opacity

The data-opacityattribute, will determine the opacity ammount of your gradient, it goes from 0to 1and accept values like .50.

data-opacity=".25"
data-opacity=".50"
data-color=".85"
data-colors="1"