Text drop shadows can be used to improve headline legibility or simply for decorative purpose. In my latest project, I’ve had to use drop shadows just for the reasons above and ended up writing a Mootools class.
There are a few techniques to generate text drop shadows, all of which are based on creating a duplicate text layer to simulate a drop shadow, but not all of them are scalable; meaning that when user resizes web page text, using browser controls (ctr +/-,ctr + mouse scroll, etc), the drop shadow may not always follow the element it’s supposed to shadow. In the particular technique I’m using, however, a container div is used to hold both text elements, insuring a uniform look, regardless of the size. Although, it may not scale as nicely as one would expect, in certain situations…

You can take a look at the demo here. If that’s something you may be interested in, here is how to use it (also check out the demo’s source code for more examples):

<script type="text/javascript" src="js/mootools.v1.11.js"></script>
<script type="text/javascript" src="js/mootools.tds.js"></script>

<script type="text/javascript">
//<![CDATA[

	var Site = {

		start: function(){
			//simple ds with no options
			new TextDropShadow($('element'));

			//all elements with particular class name
			new TextDropShadow($$('element.classname'));

			//set ds color to #222 and it's opacity to 50%
			//when using apacity, you must specify background color or IE will output junk
			new TextDropShadow($('element'), {color:'#222', opacity: 0.5, background: '#fff'});

			//specify color and direction
			new TextDropShadow($('element'), {color:'#222', top:2, left:2});

			//shadow direction can take negative values as well
			new TextDropShadow($('element'), {color:'#222', top:-1, left:-1});
		}

	};

	window.addEvent('domready', Site.start);
//]]>
</script>

The script is available for download here


4 Responses to “Mootools text drop-shadow”

  • […] pr0digy.com » Mootools text drop-shadow 3 hours agoAs always - an addition to the mootools repotoire because you know how designers love […]

  • Gravatar
    May 13th, 2008 at 1:26 pm
    magoo101 says:

    Just wanted to let you know that you have a couple code errors in your example above.


    //specify color and direction
    new TextDropShadow($('element'), {color:'#222', top:2 left:2);

    …should actually be…


    //specify color and direction
    new TextDropShadow($('element'), {color:'#222', top:2, left:2});

  • Yep thanks - corrected the typo.

  • hi,

    will you touch it again to make it also working with mootools 1.2? would be fantastic! :-)
    thank you for your great work.

Leave a Reply


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>