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.

CSS3 supports gradients, you don't need jQuery plugin for that. The problem is that not all browsers implement CSS3. — RaYell
– RaYell, Commented Jul 26, 2010 at 14:20
@RaYell, I want to do something like: elem.css(gradient(#000).to(#fff)); in js without having to manually write out all the CSS by hand, which is pretty annoying. — Mark
– Mark, Commented Jul 26, 2010 at 17:24

FelipeAls · Accepted Answer · 2010-07-26 16:47:57Z

1

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.

answered Jul 26, 2010 at 16:47

FelipeAls

22.3k9 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

oezi · Accepted Answer · 2010-07-26 14:21:26Z

0

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

answered Jul 26, 2010 at 14:21

oezi

51.9k10 gold badges102 silver badges119 bronze badges

Comments

ScottS · Accepted Answer · 2010-07-26 14:24:38Z

0

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.

answered Jul 26, 2010 at 14:24

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Comments

tcooc · Accepted Answer · 2010-07-26 14:35:56Z

0

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.

answered Jul 26, 2010 at 14:35

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:07:37Z

0

If you find coding CSS3 gradients difficult, you can try CSS3 gradient generators. You can find a list of gradients here.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 12, 2012 at 18:16

GILL

3194 silver badges15 bronze badges

Comments

Mark · Accepted Answer · 2012-02-12 19:33:26Z

0

Today you use cssHooks to do jquery gradients cross browser.

answered Feb 12, 2012 at 19:33

Mark

33.8k34 gold badges109 silver badges139 bronze badges

Collectives™ on Stack Overflow

jquery css3 gradient plugin

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related