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;
}
June 23rd, 2008 @ 1:56 pm
Cool technique but I have to add the code below to make it works.
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
June 23rd, 2008 @ 2:35 pm
[...] 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 [...]
June 23rd, 2008 @ 3:30 pm
@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!
August 3rd, 2008 @ 10:10 am
[...] 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 [...]
November 7th, 2008 @ 8:11 am
Nice technique but it’s invalid HTML because you’re duplicating the copy twice.
November 8th, 2008 @ 5:49 pm
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.
January 29th, 2009 @ 2:04 pm
Nice idea. It’s a shame that such methods are necessary.
July 19th, 2009 @ 9:13 am
nice tutorial, i have this idea in my mind but i was not sure yet how to do this. excellent css technique. I would use this rather using different css hacks for different browsers. :)
August 20th, 2009 @ 12:04 pm
Use a bit of jQuery to add the H6 after the H1’s dynamically. That way you have no duplicate content for search engines and you dont’ have to maintain two sets of text.