longer to load than plain text or other HTML tags. Another (and to some more important) reason is that search engines cannot read the text contained within images. So using images for your logo and other areas of text that contain relevant information about your site will prevent a search engine from being able to properly index your site. Fortunately there are a lot of cool things that can be done these days with CSS, and using an image to achieve an styling effect is almost never neccessary. Below I outline how you can create a shadow effect in css using absolute positioning.

Creating Shadow Effects for Text with CSS Absolute Positioning

One easy way to achieve a shadow effect with text using css is to utilize CSS absolute positioning. The idea is to create your text, give it a fixed position, and then create an identical tag (but this time with the desired shadow color), and set the position of that text slightly to the left and/or bottom of the first piece of text. Here is an example of what I mean:

The code for this is:

<h4 id="shadow" style="color:#999999;position:absolute;left:6px;top:219px;">Creating a Shadow Effect for Text with CSS</h4>
<h4 id="text" style="color:#000000; position:absolute; left:4px; top:219px;">Creating a Shadow Effect for Text with CSS</h4>

In this example the shadow is set 2 pixels to the right of the text. It is important in this example that the text used to create the shadow effect comes before the actual text to be displayed, since the browser decides which layer of text should be fully displayed by looking at which one comes last in the HTML source code. For instance, if the code went like this:

<h4 id="text" style="color:#000000; position:absolute; left:4px; top:219px;">Creating a Shadow Effect for Text with CSS</h4>
<h4 id="shadow" style="color:#999999;position:absolute;left:6px;top:219px;">Creating a Shadow Effect for Text with CSS</h4>

Then the resulting text would display like this:

Creating Shadow Effects for Divs with CSS Absolute Positioning

A similar effect can be achieved for other HTML objects. In this example, I show how a shadow can be applied to a div using css absolute positioning. The CSS used is very similar to the CSS used in the above example to create a shadow effect for text.

In this example, the shadow div is set off 6 pixels to the right of and 6 pixels below the main div. The code for this is:

<div id="shadowDiv" style="position:absolute; top:650px; left:10px; background-color:#000000; width:200px; height:200px"></div>
<div id="mainDiv" style="position:absolute; top:644px; left:4px; background-color:#0000FF; width:200px; height:200px;">Blue div with black shadow</div>

Here again, the ordering of the divs in the source code is important. Hope this was helpful!