Mootools text drop-shadow
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…
Categories
Search
Popular posts
- Mootools Slide Effect: expand all, collapse all or use as accordion
- Unobtrusive AJAX with CodeIgniter and Mootools
- Live search with CodeIgniter and Mootools
- Mootools text drop-shadow
- codeigniter
links for 2008-05-06 | iKeif says:
[…] pr0digy.com » Mootools text drop-shadow 3 hours agoAs always - an addition to the mootools repotoire because you know how designers love […]
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});
Alex says:
Yep thanks - corrected the typo.
Florian Hofmann says:
hi,
will you touch it again to make it also working with mootools 1.2? would be fantastic! :-)
thank you for your great work.