Gradienter: Add gradient to elements
Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that that’s very boring to do manually, I’ve decide to write jQuery plugin which will do that job.
Gradienter is easy to use, and with small effort you can have really interesting color effect on your page.
Since that this is jQuery plugin, we should include jQuery and Gradienter JavaScript files in our page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="gradienter.js"></script>
After this, at the bottom of the page we have to apply Gradienter on desired elements and optionally set parameters.
$(element).gradienter();
Gradienter have only three parameters:
color_start: 'FFFFFF' // first color in gradient color_end: '000000' // last color in gradient prop: 'background-color' // on which CSS property should apply gradient
So, if we want that all elements with ‘box’ class have gradient started from #56B2CB and finished with #164E5D, all we have to do is next:
$('.box').gradienter({ color_start: '56B2CB', color_end: '164E5D' });
Note that colors are in HEX format, without #.
Changing the ‘prop’ parameter gradient can be applied to all CSS properties that have color (background-color, color, border-color).
Comments [ 20 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] here, you might want to subscribe to the RSS feed for updates on this topic.Powered by WP Greet BoxGradienter is a new and innovative jQuery gradient color plugin to dynamically add gradients to [...]
-
[...] Gradienter is easy to use, and with small effort you can have really interesting color effect on your page. Ivan Lazarevic made this for one of his theme project and decided to release it for public. [...]
-
[...] Download Demo [...]
-
[...] Download Demo [...]
-
[...] [...]
-
[...] 12).Gradienter- Add gradient to elements [...]
-
[...] Source Demo [...]
-
[...] Download Demo [...]
Leave a Reply
More Articles
-
Image gallery in 4 lines of code with MooTools and Dojo
Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.
Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. [...]
-
Twitter Flock for Wordpress: multiple accounts tweets with style
Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will look like and will they cache or not.
One of the things that make this plugin different form other are tabs above Twitter Flock box. This tab [...]
-
Just Random Color
Some times ago I was working on app where for each category we had to assign random color in case that user didn’t choose one. A few day ago I needed to generate random color again. Instead of copy/paste code from one place to another much better is to create re-usable module. Also, this might [...]
-
HTML5/CSS3 Circle Music Player
More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed.
[He have more great designs which you'll see if you go to his [...]
January 5, 2011
It doesn’t work at all.
January 7, 2011
Hi
It worked like a sharm! Thank you very much!
January 24, 2011
Thanks very nice and it’s working fine.
March 3, 2011
Simple but very effective writing. Thanks for sharing such a nice post
May 10, 2011
Doesn’t work for me, using Firefox 4.01 and jQuery 1.4.4.
The function appears to think that each element to which the colouring is to be applied is an array of some kind with a valid .length property. i.e.
steps = $(el).length;
But that line always evaluates to 1 for me. Consequently, none of the code inside .each loop below ever executes:
$.each($(el), function(i,item){
FYI, the code sets up lots of global variables, unintentionally. E.g. this line:
var r = g = b = 0;
only sets up r as a local variable. g and b are set to be globals. Other variables in the function have no “var” in their declaration, and so are global.
November 1, 2011
Thanks! it’s working fine.
Cheers!
Jacob.
March 31, 2012
Thank you so very much for taking the time to share…very useful, indeed!
August 3, 2012
Works great. Will use it on a site if you don’t mind
September 21, 2012
does not work at all¡¡¡¡¡¡ don not use it
December 20, 2012
Doesn’t seem to work; testing in Chrome (23.0.1271.97 m)
December 25, 2012
@Winkyboy
did you try to open demo page ?