CSS Tip: Easy Cross Browser & Valid CSS Text Shadows

Photo Credit: Glockenblume

Although I am certain that I am not the only one doing this, I have developed an extremely easy way to get CSS text shadows without the need to use the wildly unsupported CSS property of text-shadow.

Lorem ipsum dolor sit amet consectetuer

Lorem ipsum dolor sit amet consectetuer

 

The only problem that some people may see with this example is “duplicate content” because the title is shown twice in the HTML. I’ve decided that sometimes when all you need is a simple text drop shadow, this is an acceptable problem. This technique is extremely easy, and I have used it on a couple sites of mine thus far with no cross-browser issues.

The Code (HTML)

<div class="post_title">
	<h1>Lorem ipsum dolor sit amet consectetuer</h1>
	<h6>Lorem ipsum dolor sit amet consectetuer</h6>
</div>

The Code (CSS)

.post_title {
position:relative;
font-family:arial;
}

.post_title h1 {
position:absolute;
top:2px;
left:2px;
font-size:30px;
color:#C9D8E9;
padding:0;
margin:0;
}

.post_title h6 {
position:absolute;
top:0;
left:0;
font-size:30px;
color:#4471A2;
padding:0;
margin:0;
}

7 Reader Comments (reply)

  1. June 23rd, 2008

    1:56 pm

    Tom said:

    Cool technique but I have to add the code below to make it works.

    h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
    }

  2. June 23rd, 2008

    2:35 pm

    CSS Text Drop Shadows - WebStockBox said:

    [...] technique is from Cagintranet Web Design. In the tutorial, you’ll learn from the Css code how to add shadow to your heading text. Just [...]

  3. Administrator

    June 23rd, 2008

    3:30 pm

    Chris Cagle said:

    @Tom - Good Catch. I use a Global Reset on all my pages, so these are already set to ‘0′ in my setup. I’ve added this to the tutorial though… Thanks!

  4. August 3rd, 2008

    10:10 am

    Mega Awesome CSS Resource List! | WebDevLounge | design, development, SEO and wordpress | articles, discussion and community said:

    [...] CSS Tip: Easy Cross Browser & Valid CSS Text Shadows Although I am certain that I am not the only one doing this, I have developed an extremely easy way [...]

  5. November 7th, 2008

    8:11 am

    JP Gorman said:

    Nice technique but it’s invalid HTML because you’re duplicating the copy twice.

  6. Administrator

    November 8th, 2008

    5:49 pm

    Chris Cagle said:

    Thanks for the comment JPGorman.

    I never claimed it was “valid HTML”. I specifically mentioned that some may have a problem with the duplicate content, but having dup content in no way invalidates the HTML.

    Thanks again.

  7. January 29th, 2009

    2:04 pm

    Geoff said:

    Nice idea. It’s a shame that such methods are necessary.

Post a Comment (rss)





Pittsburgh Web Design - Cagintranet Web Design