Tips & Tutorials

In this section we plan to publish useful tips, tricks and techniques beneficial to other Web designers and those with a creative mind. Our first “lesson” demonstrates a simple, clean method of creating true text dropshadows with DOM manipulation by a javascript and a simple position adjustment by its paired CSS style sheet.

True Text Dropshadows with CSS and Javascript

*I discovered this technique while rummaging through my familiar forums one day. If the original author happens along or anyone who recognizes this method, I would be grateful if you could please contact me at your earliest convenience, so I may reference appropriate credit to the original author.

Let me start by displaying the result of this technique as a simple heading. For an exaggerated effect, the text has been recolored to a rich purple. Using the same color as the background presents a dramatic effect; however, be cautious when applying the same colors to text and background, as most search engines see this as an old “keyword stuffing” technique.

True Text Dropshadow

The styling half of this technique is rather simple, repositioning the element by assigning it a z-index value. (Please see the CSS .class definition below.)

dropshadow.css

  • .dropshadow {
  • color: #666; /*not required*/
  • position: relative;
  • z-index: 10;
  • }

The DOM manipulation is handled by the javascript half of this “paired” technique. (Please see the javascript code below.)

dropshadow.js  //function MakeDropShadow()

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
}

Please note the second function to manipulate the RGB coloring to display the shadow. The depth and breadth of the shadow may be altered by manipulating the color values in this function of the script.

dropshadow.js  //function CreateShadowChildren()

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 always 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;

The final effect is achieved by pairing the .class selector defined at the top of this page with the javascript code outlined in the two containers above. Whether the javascript is run at the beginning or end of the page markup is a personal preference.

One possible method is to define “dropshadow.css” as a single, linked CSS style sheet with the only selector definition being our dropshadow class. Save this style sheet in the /styles/.. subfolder (or wherever you store style sheets). Combine the javascript from both containers into a single file called “dropshadow.js” and save it in the /scripts/.. subfolder (or wherever you store script files).

In any page where the dropshadow style is to be applied, simply reference both files in the {HEAD} section, and define the “dropshadow” class on any block level text tag, e.g. h2, h3, and voila! There be dropshadows!