HeavyBoy    
HeavyBoy Web and Photoshop Tips HeavyBoy

 
 
 

  Web Tips - CSS Text Shadow

 
<< Go Back A Page
 

Using Cascading Style Sheets (CSS) you can give your text a drop shadow on pages or sections with a darker background. Just see the example below:

 

TURN THIS TEXT HEADER INTO A

TEXT HEADER WITH A DROPSHADOW IN INTERNET EXPLORER

 


The benefit is that you can keep your text searchable by the search engine spiders, instead of turning them into a graphic.

Simply insert the indented code below into your .css file, and call it with the shadow class:

.shadow {
color: White;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
height: 21px;
filter: DropShadow(Color='#333333',OffX='1',OffY='1',Positive='1');
}

You can change the font family, color and size, and drop shadow information.

Please note, that this only works in Internet Explorer, it does not appear to work in any other browser at this time. We strongly advise that you create a seperate style sheet for Netscape based Browsers and a seperate style sheet for Internet Explorer.

 
 
HeavyBoy
 
 

 

BounceFish Website Design

BounceFish

 

  HeavyBoy

Designed by BounceFish Atlanta Web Design