[jQuery] Imageless alpha transparent rounded drop shadows -- performance
I've been toying with a new project and don't know rather I should
continue or not -- as the approach may never be optimizable. Basically,
a alpha transparent drop shadow is drawn around any element with the
class "iceShadow" given to it. Alpha transparency is achieved through
opacity so it works under IE (without having to rely on .PNGs and the
AlphaImageLoader filter). The dropshadow's color and shape (thickness +
layers) are configurable.
As of now my example is very "drafty". I am really trying to figure out
if this approach is at all worthy of pursuit, or if I should try a
different path. The example will work fine if 2-3 dropshadows are to be
made, but I get 4+ second pageloads if I try to drop shadow 15+ elements).
As you all know, I'm maniacally trying to learn JS + jQuery ;) , and I
could sure use some feedback on this.
The drop shadows are applied through absolute positioning as follows;
1: container div is drawn around element with class "iceShadow"
+ container div inherits positioning of element
+ element's positioning is stripped, and placed in upper left
corner of container div
+ container div width + height are extended to shadow depth
2: shadow layers are applied [ 2 methods exist -- horizontal
scanning with exact opacity + onion skinning technique ]
+ left, mid, and right corners are drawn using shadow.thickness
by shadow.thickness "pixels" of differing opacity
- a rounding effect is achieved per corner
+ bottom and right shadow is drawn
The (again "drafty") example page is: http://www.iceburg.net/shadow/
NOTE: The page may take > 3 seconds to load!
I'd be happy to hear what the list suggests.
Regards,
~ Brice
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/