Interactive shadows; jQuery.shadowtext

Interactive shadows; jQuery.shadowtext

The jQuery.shadowtext plugin lets you add interactive, animated CSS3 text-shadow to parts of your webpage. The interaction is that it reacts to the mouse cursor position and casts a shadow at the opposite side of text . Or on the same side, or the other way around, or not a shadow at all.

It’s easier to just demonstrate: [thkBC height=”640″ width=”960″ anchortext=”http://blog.vanderlee.com/demo/shadowtext” title=”http://blog.vanderlee.com/demo/shadowtext” url=”http://blog.vanderlee.com/demo/shadowtext” type=”iframe”]  😉

One important note is that it does NOT work on IE (anything upto and including IE9, last time I checked), because IE still doesn’t support CSS3 text-shadow. But it should work on every other normal browser. IE does have filters and some other tricks that kinda look like text-shadow, but catering to their ugliness simply wasn’t worth the effort for me.

Anyway… demo/instructions/download can be found here: jQuery.shadowtext.

p.s. ShadowText can use our jQuery.px plugin if installed. It’s not required, but having it installed allows you to use more unit types for various distances.