Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Box-shadow Animation (gallery-boxshadow-anim) on cdn

Last Updated: 08/16/10

+ 0 -

Patrick Cavit

YUI Contributor

See 4 more by this user.

Created: 08/15/10
Last CDN Push: 08/18/10
Build Tag: gallery-2010.08.18-17-12
Project: YUI 3
License: YUI BSD
YUI Version: 3.2.0 PR1
Free for use.

YUI's Animation object doesn't support animating the CSS3 box-shadow property so I built a behavior add-in to provide it.

Simply specify a from or to value of "boxShadow". It will be normalized for you.

Currently only supports a single box-shadow with pixel measurements. The plan is to add support for multiple box-shadow values as soon as somebody provides an actual use for them that doesn't look silly.

Doesn't work in Opera due to some weird box-shadow redraw issues in that browser. Doesn't work in IE < 9 (& support for IE9 is theoretical at best currently)

Code Sample

<script src="http://yui.yahooapis.com/3.2.0 PR1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.08.18-17-12'
}).use('gallery-boxshadow-anim', function(Y) {
 
    var a = new Y.Anim({
        node : "#a",
        to : { boxShadow : "0 0 50px 5px #F00" }
    });
 
    a.run();
 
});

Forum Posts

No forum posts for this module.