Drop Shadow Effect Drop Shadow Effect

 

Ok, this is pretty cool. The code, which goes in the head between <script></script> tags, looks like this:

<style media="screen" type="text/css"><!--
 #title 
{
  font: bold 75px "Hoefler Text", serif, "Times New Roman", Georgia, Times;
  position: relative;
  top: 5px;
  left: 5px;
}
 #text {position: relative; top: 0px; left: 0px; color: #000000; z-index:2;}
 #shadow {position: absolute; top: 10px; left: 8px; color: #999999; z-index:1;}
 --></style>

You can edit the colors and the offset of the shadow effect (the "top"and "left" parameters in the "#shadow" class definition).

The actual drop-shadowed text is placed within a <div></div> tag. Inside the <div> layer, the text and shadow are placed inside nested <span></span> tags:

<div id="title">
    <span id="text"> Drop Shadow Effect</span>
    <span id="shadow"> Drop Shadow Effect</span>
  </div>