Typography Drop-Shadow

[daddyalfie]

I believe this topic may have been discussed before, but after a diligent search I have not found an answer.

 

How do I add a drop-shadow to a heading? I know I can do it in a graphics program like PhotoShop, but that negates the value of a <h1> header!

 

I suspect the answer is: "you don't with current CSS!"

 

 

Alfie

[falkencreative]

The answer is "you can't with current CSS". It is part of CSS3, but not all browsers support it yet. Firefox/Safari/Opera/Chrome do, but as far as I know IE doesn't (even IE8).

 

http://owltastic.com/2009/12/shadows-and-css3/

http://maettig.com/code/css/text-shadow.html

 

My personal opinion is that you can use this, as long as it is intended to be a minor effect. If your text requires the drop shadow in order to be readable, I wouldn't use this (since obviously IE users won't be able to read it).

 

Otherwise, you're stuck with using an image within an h1 tag, and using either alt/title tags on that image. I'm not totally sure how that affects SEO, but I would assume that plain text is more effective than using an image with alt/title text.

[daddyalfie]

Yep! That's the answer I expected.

 

Many thanks!

 

Alfie

[newseed]

You can layer two text together (one being the shadow using span) and use em so that it sizes nicely. However, the drawback is that it will be read twice by those using screen readers or whatever.

[PicnicTutorials]

I'm pretty sure IE has a filter for this as well. Otherwise just use an image replacement for SEO. http://www.visibilityinherit.com/code/image-replacement.php

[daddyalfie]

Holy mackerel dere Andy!

 

Amazing! I first tried just "text-shadow: (etc)" and in FF it works just dandy (Actually amazingly!)

 

@Eric those samples are equally amazing. I shall study those further!

 

In my case the "text-shadow" will work just fine: it will be only an enhancement to an otherwise acceptable design.

 

Doing a "happy dance" here

 

 

Effusive thanks!

 

Alfie

Edited June 2, 2010 by daddyalfie