CSS Drop Shadows

September 24th, 2008

Per request from a client, we need to create some text with CSS based drop shadows that works across all major browsers.

 After some research and comparison, we implemented the technique by Scott Jehl. http://www.scottjehl.com/v7/index.php/process/html_text_drop_shadows

The CSS is very simple … no filters and hacks. Yes this solution works beautifully across IE, FF on PC, as well as Safari on Mac.

We did have a problem with the shadow positioning on IE7. Later on we found that the positioning of the shadows actually relates to the line height setting. So if you have trouble with that, try setting different line height for the same tag that you are applying the class=”highContrast” to. (Check out Scott’s code and you will know what I am talking about here.)

One Response to “CSS Drop Shadows”

  1. kiran says:

    Nice CSS Tip on drop shadow.Thank u.

Please add your comment