Geek Answers Handbook

Jquery css3 gradient plugin

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

Thanks.

Edit: sorry for the ambiguity, I'm not trying to get CSS3 to work with browsers that don't support it. I know that I can use gradients in browsers that support CSS3 gradients and using IE filters. I am trying to see if someone has already written a jQuery plugin so that I can do this in code.

For example, jquery core standardizes elem.css('opacity', '.5') so that it works with cross browsers regardless of different syntaxes. Look for something similar for gradients.

But if this does not exist, I think I will just write it myself.

+4
source share
6 answers

Today you are using cssHooks to execute cross jQuery browser.

0
source

Mmmmm, pie.

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

This .htc really easy to implement and use.

+1
source

creating multiple elements is the only way to get a cross browser gradient when you don't want to use an image - and jquery cannot create images dynamically. use one of these (bad?) plugins or just use Photoshop (or gimp (or paint)) to create your gradient.

My favorite is: support for gradients for beautiful modern browsers (new versions of Safari / Firefox, Internet Explorer) and using the usual background color as a backup for bad browsers (old versions of Safari / firefox)

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

0
source

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

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

0
source

The only cross-browser way to create a gradient is to create elements with changing background colors. Moz, webkit and IE browsers are supported with three rules (each 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 may have a reserve with a normal background color.

0
source

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

0
source

More articles:


All Articles