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
- Live search with CodeIgniter and Mootools
- Unobtrusive AJAX with CodeIgniter and Mootools
- Mootools text drop-shadow
- CodeIgniter model productivity methods
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.
Alex says:
Hi Florian, I’m thinking of rewriting (adjusting) the scripts for 1.2. Though I can’t really give you the time frame on that :(
batman42ca says:
I just converted it to 1.2. All you have to do is the following:
Inside applyDropShadow(), do the following
add this:
var size = el.getSize();
replace this
height: el.getSize().size.y + offsetY,
width: el.getSize().size.x + offsetX
with this
height: el.size.y + offsetY,
width: el.size.x + offsetX
and replace this
el.remove();
with this
el.destroy();
Alex says:
Thanks for that, Batman :) I’ll be converting most of the scripts to 1.2, soon :)
Daniel Buchner says:
I am kind of frustrated, even before batman42ca’s post I was tinkering with things to try and get it working with 1.2 and kept getting this:
TextDropShadow is not defined
start()
E()mootools-1.2-core... (line 56)
extend(undefined)mootools-1.2-core... (line 57)
fireEvent(function())mootools-1.2-core... (line 173)
fireEvent("domready", undefined, undefined)mootools-1.2-core... (line 174)
onAdd()mootools-1.2-core... (line 248)
C()mootools-1.2-core... (line 168)
[Break on this error] new TextDropShadow($$('.textshadow'), {color:'#fff', top:1, left:1})...
even after the changes posted I still get the undefined error.
I have the exact same instantiation as the demo, save my elements switched in under the object's, and it blows up every time.
for some reason the instantiation of this class looks wierd...
here is my page's script init:
var Site = {
start: function(){
new TextDropShadow($$('.textshadow'), {color:'#fff', top:1, left:1});
}
};
window.addEvent('domready', Site.start);
Any help here would be greatly appreciated
Alex says:
Hmm, looks like you forgot to include the drop shadow script… Essentially, the error means, that TextDropShadow object does not exist.
Daniel Buchner says:
Wow, that was stupid, I was missing one ellipsis dot for the JS file path!
But when that was fixed I did get one error that needed correction from what batman42ca posted:
height: el.size.y + offsetY,
width: el.size.x + offsetX
his fix for this section should not have the el before size.x and size.y, I got a firebug break on that and it cleared right up when the el was erased.
Anywho, sorry for that last dumbassical post, great script Alex and thanks for the help with the 1.2 convert Batman - Blamo, Pow!
old school batman stuff, in case you didn’t get that :)
batman42ca says:
Daniel,
Thanks for spotting the typo. The corrected changes to convert from 1.1 to 1.2 are:
Inside applyDropShadow(), do the following
add this:
var size = el.getSize();
replace this
height: el.getSize().size.y + offsetY,
width: el.getSize().size.x + offsetX
with this
height: size.y + offsetY,
width: size.x + offsetX
and replace this
el.remove();
with this
el.destroy();
Ahmed says:
I wonder if the same technique can be used to add glow effect. Some browsers will not display the CSS glow effect you know.
Alex says:
It’s doable. Personally, I don’t see much use for it.