(t:CSS & Text Shadows:t)

Probably the easiest way to do text shadows is with CSS. Unfortunately Internet Explorer (as of verion 8) doesn't recognize CSS tags for text shadows.

So first we'll offer and example of simple text shadows using CSS. Then we'll cover an example of text shadows that work in EVERY browser including Internet Explorer. It's a bit more complicated, but it works and it's the same method used for the GuruLounge header on this site.

Try this simple CSS example first:

<html><body> <font style="text-shadow: #000 2px 2px 3px;"> Hello World! </font> </body></html>

You can type the previous example in a simple text editor like NOTEPAD. Then save it as "test.html". Open the file with your browser and you should see something like the following:

Hello World!

If you're using a browser OTHER than Internet Explorer (such as Firefox or Chrome) you should see a shadow behind the above text "Hello World!".

The syntax for this CSS tag has four (4) elements.

Color (in this case "#000" or BLACK).
X or Left offset (in this case "2px" or 2 pixels).
Y or Top offset (in this case "2px" or 2 pixels).
Blur Radius (in this case "3px" or 3 pixels). The smaller the number the smaller radius and sharper the shadow.

Now, in Internet Explorer this doesn't work. So we have to do something more complicated. To do shadowing for IE we have to use DIVs or Layers.

Basically, you define a layer, put some text in it. Then define another layer, put the same text in it. Then position the first layer behind the second.

Try this code in your text editor:

<html><body> <b> <div style="position: relative; color: #7d7d7d; font-size: 16px; top: 22px; left: 2px;"> Hello World! </div> <div style="position: relative; color: #000; font-size: 16px;">Hello World!</div> </b> </body></html>

Save it to "test.html" and open it in your browser. If all goes well, you should see something like the following:

Hello World!

Hello World!

Now this should be visible in practically ANY browser that's capable of CSS and DHTML.
This means if you're using Internet Explorer you should be able to see a shadow behind the text "Hello World!".

Let's go over what was done here, line-by-line...

Lines #1 and #8 are the opening and closing HTML and BODY tags for the page.
Lines #2 and #7 are tags that implement the BOLD font. We can see the text and shadow better this way.
Lines 3, 4 and 5 are the first layer (the "shadow" layer).
Line 6 is the generic text line that we will be "shadowing".

Take a look at lines #3 and #6. You can see they have a "style" tag which implements a command "position: relative;".
This tells the browser these DIVs or layers are "movable" and "stacked", i.e the first one is "behind" the second one. It also indicates that any position they get moved to is going to be relative to the position it was originally placed.

DIVs or Layers "stack" in the order they are placed on the page, i.e. the second one gets placed on top of the first one. And a third one would get placed on top of the second one... and so on...

You can change this stack order with the "z-index" command but we don't need to so we won't get into that in this tutorial.

Now in the first DIV there are position commands: "top: 22px;" and "left: 2px;". This tells the browser to move the first layer from the top of it's original position by 22 pixels, then move it from the left of it's original position by 2 pixels.

You should also note the color commands in the "style" property:

Our regular text color (the second DIV layer) has "color: #000" (or BLACK).
The first layer (our shadow) has "color: #7d7d7d" (or medium-light grey). Since there's no "blur-radius" for this kind of shadowing you have to use different shades of color to get the effect you want.
Also, you might want to use a thicker or bolder font when shadowing, hence the BOLD tags on lines #2 and #7.

The only other item of note is the "font-size: 16px;" command. This implements a larger font size for the same reason the bold tags do, it looks more practical. Trying to shadow small, narrow fonts using this method doesn't yield very good results so I try to stick to a larger font when using this method of shadowing.

You can see an example of both methods of shadowing below. The first being the simple CSS style discussed earlier. The second using layer pairs (bold elements removed):

Hello World!