Css Drop Shadow
How to add drop shadow to text without the use of images using cascading stylesheets. Use the shadow filter to make drop shadow text with CSS

Bookmark This Page | Click here for more css scripts

CSS Drop Shadow

The headline above is not a graphic, but text with the CSS shadow filter applied. You can code to your html directly inline or use it in a stylesheet like I have on this page.

The code in the text area below is for the inline style. Copy and paste this code where you want the css drop shadow effect to appear on your webpage.

The code in the text area below is for the css stylesheet method the you place into the head of your html document. You can change the class name ".hypergurl" to anything you wish.

And then you apply the class selector to your body text like this.

<p class="hypergurl"> CSS Drop Shadow</p>

You can add different variations to give your webpage a great look by aligning the text shadow effect to the left or right of a block of text. In this case you add a "float" command to the code and wrap the code in a <div> tag and it would look exactly like you see here. Notice how the paragraph of text wraps around the shadow text.

Can it be floated right? You bet it can! The code for floating left or right is in the text area below. Simply change the "float" command to suit along with the color of the text and of course place your own wording into the code.

Now headline banners can load fast thanks to the power of CSS!