daddyalfie Posted June 2, 2010 Report Share Posted June 2, 2010 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 2, 2010 Report Share Posted June 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
daddyalfie Posted June 2, 2010 Author Report Share Posted June 2, 2010 Yep! That's the answer I expected. Many thanks! Alfie Quote Link to comment Share on other sites More sharing options...
newseed Posted June 2, 2010 Report Share Posted June 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 2, 2010 Report Share Posted June 2, 2010 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 Quote Link to comment Share on other sites More sharing options...
daddyalfie Posted June 2, 2010 Author Report Share Posted June 2, 2010 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.