Simple:
To create a dropshadow akin to the ones in example(1) (above) just add the following to your CSS style tag:
filter:DropShadow(OffX=2, OffY=3, color=#000000);
For example, your stylesheet would look something like this:
<style type="text/css">
.maintext {font-family:arial; font-size:11px; color:white; filter:DropShadow(OffX=2, OffY=3, color=#000000);}
</style>
This CSS property only works in Internet Explorer. When used with transparent .gifs, it will cast a shadow only around the viewable parts of the image, very cool. Shadow blurriness can also be set.
Complex:
To create cross-browser dropshadows, you'll need two DHTML layers. The first layer is normal text, positioned absolutely. Then, to create the shadow layer, you'll need to duplicate the same layer, offset its position by a few pixels, and put the code ABOVE the foreground code (since pages are built background > foreground, this will make sure that the shadow text is behind your main text), so your page might look like this:
<div style="position:absolute; top:12px; left:12px;">
<font color="black">text text text</font>
</div>
<div style="position:absolute; top:10px; left:10px;">
<font color="white">text text text</font>
</div>
Notice that the first layer is two pixels off, and the font colour is black. This is the shadow layer, seen in example(2) at the top of this page.
Note: you may want to remove all link tags (<A HREF>) from your shadow layer, feel free to use CSS in both layers, as long as the text is the same font and size, they should match up perfectly.
This will not create dynamic moveable shadows like the ones on kaput.org, the complex method is the first step to doing so - the rest involves mouse tracking and vector stuff, which i'll explain in a later tutorial.
