jquery css3 gradient plugin

Question

Does anyone know of a jquery css3 plugin that supports cross browser gradients. All the gradient plugins I've seen thus far are based on creating many elements.

Thanks.

Edit: Sorry for being unclear, I'm not trying to make CSS3 work on browsers that don't support it. I know I can use gradients on the browsers that support CSS3 gradients, and using IE filters. I'm trying to see if anyone has already written a jQuery plugin so that I can do it in the code.

for instance jquery core standardizes elem.css('opacity', '.5') so that it works cross browsers regardless of the different syntaxes. Looking for something like this for gradients too.

But if it doesn't exist I guess I'll just write it myself.

Answer 1

creating a lot of elements is the only way to get a cross-browser gradient when you don't want to use an image - and jquery can't create images dynamically. use one of those (bad ?) plugins or simply use photoshop (or gimp (or paint)) to create your gradient.

my favourite is: support gradients for nice, modern browsers (new safari / firefox versions, internet explorer) and use a normal background-color as fallback for the bad browsers (old safari / firefox versions)

NOTE: in this case, IE is one of the good browsers, it supports gradients since... all the time i can remember

Answer 2

Not specifically jQuery, but using Raphael (javascript graphics library) you can set cross browser gradients. See settings under http://raphaeljs.com/reference.html#attr.

Note: this is a vector graphics library implementation that uses various technologies depending on the browser to achieve its effects.

Answer 3

The only cross-browser way to create a gradient is to create elements with changing background colors. Support for moz, webkit and IE browsers are possible, with 3 rules(every gradient):

/* IE */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff00,endColorstr=#00000000);
/* webkit(Safari, Chrome) */
-webkit-gradient(linear,left bottom,right bottom,color-stop(1, rgb(0,0,0)),color-stop(0, rgb(255,255,255)));
/* mozilla(Firefox) */
-moz-linear-gradient(left center,rgb(0,0,0) 100%,rgb(255,255,255) 0%);

Then you could have a fallback with a normal background color.

Answer 4

Mmmmm, pie.

CSS3PIE - Progressive Internet Explorer - makes Internet Explorer 6-8 capable
of rendering several of the most useful CSS3 decoration features.

This .htc is really easy to implement and use.