process

1. Recent Articles at Filament
2. Filament hosts Markup & Style
3. CSS Table of Contents
4. Styling the Button Element with Sliding Doors
5. StyleMap v2: Visual Sitemap
6. StyleMap: Visual Sitemap
7. HTML Text Drop Shadows
8. Zen Donuts

HTML Text Drop Shadows (w/o CSS3)

The drop shadow may not be a designer's most important tool, but on occasion the need arises to add some punch to a headline. One example could be for branding text that is positioned on top of an image; Depending on the colors of the image, your text might get lost without a shadow to pop it out.

When it comes to HTML text with drop shadows, our options are pretty slim:

• We could use CSS3's text-shadow, but as of yet it's only supported by Safari.
• We could use the CSS ":before" pseudo-element to duplicate text and simulate a drop shadow, but that won't work in IE.
• We could cover IE with a proprietary css filter, but that'd be a non-standard approach.

If you opt for a combination of the approaches above, the appearance will vary heavily between browsers. For the time being, standard CSS is not gonna cut it, but a little DOM manipulation can do exactly what we need.

This unobtrusive script will throw a drop shadow on any block element with the class “highContrast”. The result is a hard-edged offset shadow that's not necessarily pretty, but it gets the job done.

How to use it

1. Be sure you've downloaded the files below and link to them in your html file (my paths look like this):

   <link href="/localProcess/jsDropShadows/css/dropShadows.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="/localProcess/jsDropShadows/scripts/dropShadows.js"></script>

   • Download the script
   • Download the CSS
2. Give any element that needs a drop shadow the class "highContrast"

   <h2 class="highContrast">Here's an example</h2>

3. That's it! Test it in a browser and assuming your paths are correct, you should have drop shadow text. The appearance of the drop shadows can be edited in the dropShadows.css file.

Like this technique? DIGG IT!

How it works

1. First, give an element the class "highContrast".

   <h2 class="highContrast">Here's an example</h2>

2. Once the page loads, the attached dropShadows.js will scan the page for any elements with the "highContrast" class, and apply the following steps to each one:
   1. select the element's content
   2. create 2 spans, one for the content text and one for the shadow text
   3. give the shadow span a class of "shadow".
   4. inject the element's content into both spans
   5. remove the original content from the element
   6. insert the two spans into the original element in Z stacking order (shadow span, then content span
   The script portion explained above:

   createDropShadows = function(){
    //get the elements with the classname highContrast
    var highContrast = getElementsByClass('highContrast');
     
    //loop through the highContrast elements
    for(i = 0; i <= highContrast.length; i++){
   	
     //current element
     var currentElement = highContrast[i];
   		
     //current element's text
     var hcContent = currentElement.firstChild.data;
   		
     //create a span to replace the content text
     var contentSpan = document.createElement('span');
     var contentSpanText = document.createTextNode(hcContent);
     contentSpan.appendChild(contentSpanText);
   		
     //create a span for the shadow and give it the class "shadow"
     var shadowSpan = document.createElement('span');
     var shadowSpanText = document.createTextNode(hcContent);
     shadowSpan.appendChild(shadowSpanText);
     shadowSpan.className = "shadow";
   		
     //kill the original text and toss the spans in there
     currentElement.firstChild.data = '';
     currentElement.appendChild(shadowSpan);
     currentElement.appendChild(contentSpan);
    }
   }

3. The generated html will look like this:

   <h2 class="highContrast">
   	<span class="shadow">Here's an example</span>
   	<span>Here's an example</span>
   </h2>

4. Lastly, the css controls the presentation.
   1. The "highContrast" element is given a relative position, as is the content span it contains. The "shadow" span is positioned absolute directly behind the content.

      .highContrast, .highContrast span {position: relative;}
      span.shadow {position: absolute;}

   2. The "shadow" span is offset 1px from the top left and colored black.

      span.shadow {
      	top: 1px;
      	left: 1px;
      	color: #000;
      }

Thoughts and Known Limitations

• Throwing an error in ie... workin on it.
• Users with css turned off but JS turned on will see duplicated content, working on the possibility of JS checking if css is turned off.
• Screenreaders may see content repeated twice... working on a solution for this (maybe that swf detecting for readers technique?).
• Modifications would need to be made for centered text
• Please feel free to contact me with any questions or comments at scott@scottjehl.com

Big thanks to Brandon Goldsworthy for ideas on extending this script.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

Downloads

Download the script

Download the CSS

Live Examples

Aspen Snowmass 2006 Website This technique is used on the text overlaying the large slideshow image

Digg This Article

DIGG IT!