Comments on: Corners, gradients and shadows with jQuery

By: Bruce

Bruce — Sat, 24 May 2008 11:58:20 +0000

I'm not familiar with "interface.js" Kevin: is that another jQuery extension? I'm no expert but my guess would be that there is a conflict between the two extensions, if they each work alone but not together.

By: Kevin

Kevin — Sat, 24 May 2008 11:48:11 +0000

I am already using jQuery along with interface.js.. however when i add corner script, then interface.js is not working.. any clue ?

By: icerabbit

icerabbit — Sat, 29 Mar 2008 02:17:37 +0000

Whaddayaknow?

I'm looking into a little tab solution. Experience a little problem with jquery. Turn back to google. Boom. There's Bioneural in the top search results, talking about jquery !

Btw. The issue is a non-transparent top left tab corner. I must be one of the first people trying tabs on a non white page ;) Even after applying transparency to the standard png tab's corners. Must be something bleeding through, but can't figure it out. So I bypassed it.

Not sure this is relevant to the entry though. But, will put the check mark anyway ;)

By: Bruce

Bruce — Sun, 23 Mar 2008 09:04:03 +0000

Rodger, it depends very much on what you mean by "this one" ;-) Note my scoresheet above says "Liquidity: Yes, with the proviso that you avoid Dimensions-reliant effects." Here meaning gradients and drop shadows. For other (non-jQuery) techniques that play nice with fluid-width pages, see the scoresheets in the companion article to this one. And if you want rounded corners with borders, gradient backgrounds and drop shadows with no extra mark-up and no JavaScript plus guaranteed liquidity see here—and convince everyone to use Safari :-|

By: rodger myles

rodger myles — Sun, 23 Mar 2008 08:50:40 +0000

Thanks Bruce, I see someone here has another (reduced?) version which has some problems.

Whilst my immediate application is in a fixed page will this one work in a flexible page?

By: Bruce

Bruce — Sat, 22 Mar 2008 14:34:42 +0000

Yes it is not only possible Rodger, but extensions are not needed since it's part of the API. You don't need a div container although it may be more convenient if you are applying effects to more than one contained element, as in the above examples. I used jQuery to selectively apply CSS3 effects to an element (h1), a paragraph class, as well as div by ID here. And JavaScript visual effects to a single list item (li) anchor here, and an entire unordered list (ul) here. There's a list of CSS selectors supported by jQuery here.

By: rodger myles

rodger myles — Sat, 22 Mar 2008 14:04:20 +0000

I am completely non-technical. I see this example uses divs to operate on. Is it possible to specify ul, li or p or others to acheive the sanme effects? Somewhere I've seen some jquey extn. that allows this.

By: Bruce

Bruce — Thu, 21 Feb 2008 17:00:22 +0000

Not weird Andrei, and not just in Firefox:

Because the Dimensions plugin employs absolute positioning, effects that use it (gradients, drop shadows) will "detach" from their elements if you try resizing your browser window or changing text size (see the effect on cases 2, 4, and 5).

By: andrei

andrei — Wed, 20 Feb 2008 11:10:36 +0000

In FF2 when resizing the test page the shadows and gradients remain in the same place... it is weird.
Cheers.