Text and box drop shadow, rounded corners and gradients with jQuery official plugin

Question

Hi!

Is there any official jQuery plugin (like jQuery UI) that allows those effects in all browsers? Or at least IE8, Chome, FF and Opera. I don't want user plugins as those often lack support in the long term, are uncompatible with one another or lack consistent quality and optimization.

I saw some "Overlay and Shadow Classes" in the jQuery UI demo page, but I cannot find any documentation on them. I think that those so often desired features must be included in jQuery somehow?

I will appretiate any help! Thanks in advance!

Answer 1

There's no "official" way to do it, but there is a pragmatic way (which has nothing to do with jQuery). For some sites, I've dealt with the problem entirely within the CSS, using a combination of the "genuine" rules, the browser-specific versions, and then the CSS3 PIE htc file (for IE). An example:

div.roundbox {
  border-radius: 8px;          // Official. Maybe someday.
  -webkit-border-radius: 8px;  // Webkit browsers
  -moz-border-radius: 8px;     // Firefox
  behavior: url(PIE.htc);      // IE
}

CSS3 PIE works remarkably well, and seems to perform much better than the IE7.js family of solutions. Basically, you drop that same behavior line into any CSS rules that use border-radius, box-shadow, etc. The script takes care of the rest, and has no effect on non-IE browsers that will render the effects via one of the first three directives.

You could also assemble a list of all your PIE-worthy objects and declare the behavior in one shot (after the regular rules):

div.shadowbox, div.roundbox, p.somethingelse { behavior: url(PIE.htc); }

There is certainly plenty of room for debate about the wisdom of this approach -- but it does work very well in many cases.