Why write this kind of article?

Ajax, DHTML, effects or whatever else you want to call them are not going to go away. Search Engine Optimization (SEO), Search Engine Friendly (SEF) and accessability will remain a concern as well. Because of that, we are going to write articles that mix tech with SEO. The first was a sliding panel that is SEF and the second was a redux of the first article that made it friendlier for Internet Explorer.

Before I continue, it was brought to my attention that this did not appear to be related to moo.fx but if you look at the demo link at the bottom of this article you will clearly see that the moo.dom.js script is used to facilitate this effect. Since I do not use drop shadowed text or this effect on this site, I created a standalone demo page that shows it in action. Rest assured, moo.fx is a part of the process. It is also intended to be a simplistic and easy to follow example so people can learn to use and enjoy moo.fx and its addons.

Why read this kind of article?

Job security? A pay raise? Boredom? I cannot guess your reasons but I can write things that you can read, play with and hopefully use.

The Introduction:

Sometimes you want drop shadowed text. Well not me, but sometimes you may desire it but then you have to decide if you want to use proprietary CSS, weird HTML constructs or Javascript. Well there is another way and it involves moo.fx, a lot extra Javascript and a little CSS but what you get is drop shadowed text that is search engine friendly.

The shadow is created by nesting 3 different H1 tags and positioning each separately of the other and then changing each of the copies colors to make the actual shadow. Essentially there are 3 H1 tags that duplicate the text and then nest one another to create an overlayed entity. This entity can the be tweaked using CSS to give the illusion of a drop shadow. Granted the proprietary tags do blurring and other effects but it would be nicer to your viewers if you send consistent content to your viewers regardless of browser.

To see the effect in action, click the demo link provided below. There is also a demo in a ZIP file that you can play with.

The HTML:

<h1>Test<h1>Test<h1>Test</h1></h1></h1>

Much of the trick is done using CSS and left on its own it would look decent but the problem is that you now have three copies of the text which is not nice when it comes to accessability or at making it Search Engine Friendly. You can see the three statements here and the result of having them.

The Search Engine Side Effect:

As you will see below, there are truly three copies of this word and that is not a good thing.

Test

Test

Test

The Code:

There is a download for this article so the full source is there but the explanation for the inner workings is pretty straightforward.

1. Using the moo.fx dom extensions, we request a list of all H1 tags of the class shadowed.
2. Each match has its original text saved and then replaced with the nested H1 tags.

Yes, it really is that simple. You now have an easy to implement drop shadow for text that will work in Firefox and Internet Explorer, keeps the source HTML clean, is friendly to search engines and other devices that require clean HTML.

As usual, if you use this we would like some credit or at least a link from your site to us. Other than that, feel free to do with this what you will.

A link to us: Fueled Software
A link to the download: Drop Shadow Zip
A link to the demo: Drop Shadow Demo

Related Posts

Forms with moo.fx part 2
5 ways to promote your site
Meta tags: what you have to know for SEO
Stop Words: No Worry
Ultimate SEO Checklist.

---