Jump to content

Typography Drop-Shadow


Recommended Posts

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!"





Link to comment
Share on other sites

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).





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.

Link to comment
Share on other sites

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!



Edited by daddyalfie
Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...