Text Drop Shadows

Text Drop Shadows

How to add cross browser drop shadow to text without the use of images using cascading stylesheets and non-obtrusive JavaScript.

I’ve wanted to use drop shadows on text for quite awhile. Unfortunately there is just no easy way to do this on a web page without the use of a graphics program and I did not want to make a graphics image every single time I wanted to throw a drop shadow around a piece of text.

The Problem

I searched for a pure CSS approach without much luck. Internet Explorer has a CSS filter that makes dropshadows, but I wanted something that would work in both Firefox (my browser of choice) and Internet Explorer (Note: I’ve been told this solution works in Opera and Safari as well).

I have seen a few people fake a text drop shadow effect by typing the text twice. They used CSS to place one on top of each other, with slight offsets, making the bottom one black so it resembled a hard edged drop shadow.

It’s a neat idea, with a few problems.

1. The drop shadow has a hard edge and looks pretty 1980′ish
2. It’s a pain to set up. You have to type all your text twice, put each in separate DIV tags, position each separately or at least create two different CSS classes to position them for you.

Most people try this once and then drop it. It’s simply too cumbersome to use. I thought the concept had potential, but the problems had to be addressed.

A Solution

What I have come up with is a JavaScript function which runs automatically when your web page finishes loading. It looks through your web page and anywhere it sees an element with the class ‘dropshadow’ it will add a text drop shadow effect to it.

Examples

<h1 class="dropshadow">I am an H1 element with Drop Shadow</h1>

I am an H1 element with Drop Shadow

<div class="dropshadow" style="color:white; font-family:Impact; font-size:4em;">White Impact font in DIV</div>

A link to further examples: http://www.stansight.com/DropShadow2.html

Getting it to work

CSS Class

All you need to get this work is to define this minimal bit of CSS between the HEAD tags of your page:

  <style type="text/css">
  .dropshadow {
     position: relative;
     z-index:10;
  }
  </style>

JavaScript

Place the “DropShadow.js” code in a file called DropShadow.js which is then included in your web page by placing this bit of code between the HEAD tags of you page:

<script src="DropShadow.js"></script>

JavaScript DropShadow.js

Note: To make smaller drop shadows change the value of max_shadows in the CreateShadowChildren function to a smaller number.

   function MakeDropShadow() {

     var node = document;
     var tag = '*';
     var wantedClass = 'dropshadow';

     // Build a regular expression that will search specically for 'wantedClass'
     var pattern = new RegExp("(^|\\s)"+wantedClass+"(\\s|$)");

     // Scan through all tag elements in the document
     var scan_elem = node.getElementsByTagName(tag);
     for (i = 0; i < scan_elem.length; i++) {

       // If element has a class of 'wantedClass'
       if (pattern.test(scan_elem[i].className) ) {

         // Get the value from the element
         var text_value = scan_elem[i].innerHTML;

         // Create Shadow Children for this element
         CreateShadowChildren(scan_elem[i],text_value);
       }
     } // End for loop
   }

  function CreateShadowChildren(shadow_element,shadow_value) {

   var top_pos = .5;
   var left_pos = .5;

   // Assign starting color (in Hex notation) for the Red, Green, and Blue
   // Components (when they all have the same value you will alwys get a gray color).
   // For lighter shadows start with a "lighter" color of 66, 77, 88 99, aa, bb, etc..
   var starting_color = '44';
   var cRed = parseInt(starting_color,'16');
   var cGreen = parseInt(starting_color,'16');
   var cBlue = parseInt(starting_color,'16');

   // Set the max number of shadow elements to create.
   // This should never be set larger than the Z-Index value of dropshadow class
   var max_shadows = 10; 

   // Calculate color increament based on range of gray colors (from starting_color to
   // the lighest gray color of #fefefe) and max number of shadows you want
   var color_inc =  parseInt(( parseInt('fe','16') - parseInt(starting_color,'16') ) / max_shadows,'10');

   for (j = 1; j <= max_shadows; j++) {

     // Build full color Hex string from it's individual RGB values
     var full_color_value = cRed.toString(16) + cGreen.toString(16) + cBlue.toString(16);

     // Create a Shadow DIV
     var shadow_div = document.createElement('div');

     //  Add the shadow_value to Shadow DIV
     shadow_div.innerHTML = shadow_value;

     // Style Shadow DIV
     shadow_div.style.width=shadow_element.offsetWidth + "px";
     shadow_div.style.color = '#' + full_color_value;
     shadow_div.style.borderColor = '#' + full_color_value;
     shadow_div.style.display = "block";
     shadow_div.style.position = "absolute";
     shadow_div.style.top = top_pos + "px";
     shadow_div.style.left = left_pos + "px";
     shadow_div.style.zIndex = (-1) * j;

     // Apppend Shadow DIV to shadow element
     shadow_element.appendChild(shadow_div);

     // Increment positons and shadows individual RGB color values
     top_pos += .5;
     left_pos += .5;
     cRed += color_inc;
     cGreen += color_inc;
     cBlue += color_inc;
   }

  }

 // Run the MakeDropShadow function when the page finishes loading
 window.onload = MakeDropShadow;