Interactive shadows; jQuery.shadowtext
by Martijn • 2011-09-08 • jQuery • 0 Comments
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: http://blog.vanderlee.com/demo/shadowtext
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.