The CSS2 text-shadow property makes it easy to add a drop shadow to a web page’s text, but so far it’s only supported by the Safari browser for OS X. Today we’re going to create CSS drop shadows for other browsers, including Firefox.
The text-shadow property has been around for a few years, allowing you control the colour, offset and blur of drop shadows below elements on your page. Although not widely supported, some designers have decided to use CSS text-shadows anyway, even if it only enhances their design for a relatively small number of users.
CSS Text-Shadows for Safari
If you’re using Safari, you’ll see white text on a white background, made visible by use of a text-shadow below:
This is white text, on a white background. Yet in Safari, you can read this, because of the black text-shadow.
If you’re not using Safari, here’s a screenshot of what you’re missing out on:
CSS Drop Shadows for Everyone*
Firefox is a great browser, but it doesn’t support that effect – so I decided to create a similar effect using the CSS it does support. While not quite as nice a shadow as you’ll see with the text-shadow property, this approach will work on a wider range of browsers – including Safari.
This is white text, on a white background. Yet with Drop Shadows, you can read this, because of the black text-shadow.
The HTML
To add the drop shadow effect, we’re going to create a title attribute on our example paragraph and duplicate the text we’ll be shadowing. Since we’re duplicating text in this manner, this technique is probably better suited for use in titles, or short passages of text, rather than entire pages.
<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>
We’ll also add <span> tags inside our paragraph to let us control the position of the normal text separately from the generated shadow.
The CSS
The CSS :before pseudo element will be used to generate the shadow from the title attribute of the paragraph, and absolute positioning used to position the normal paragraph text overtop the shadow text. You’ll note that CSS generated text is not normally selectable, which means copying and pasting text is not adversely affected by this technique.
.shadow { position:relative; display:block; color:#fff; }
.shadow span { position:absolute; display:block; top:0px; }
.shadow:before { display:block; padding:1px; content: attr(title); color:#666; } When I was developing CSS Image Maps I realized that you could use position:absolute to control the placement of an element within another element that was set to use position:relative. This lets use control the placement of the text and it’s shadow, while still being able to use the element within the regular flow of the document.
You can control the foreground colour, and overall font properties using .shadow. The properties for .shadow:before allow you to control the drop shadow offset, using padding, as well as the shadow colour.
* Disclaimer
No, it doesn’t work in IE6. If you’re still using IE6, why not upgrade to Firefox? It’s free.
Updated Heading Example
Here’s a example of where this technique could be useful. Below are two example headings, both with the same colour, size and font. The first heading does not have anything extra added to it. The second heading uses the CSS Drop Shadow effect.
Example Heading
Example Heading
Suggested Reading
CSS Mastery: Advanced Web Standards Solutions
g0t digg?
g0t digg?
haha nvm, i am a fuckin queer. excuse me, im a douche bag.
This seems like a long way to do this.
Simply position a second paragraph below the first paragraph, set its z-index lower and shift it over 1px by using positioning. This WILL work in IE6.
Just to let you know (I’m assuming you don’t – but you might). Safari is based on the open source browser konqueror. It’s the default browser and file manager for KDE on a gnu-linux or unix OS.
Apple just modded it to run on their Unix based system – so it works on safari too.
============No, it doesn’t work in IE6. If you’re still using IE6, why not upgrade to Firefox? It’s free.============
IE is also free. I fail to see the evangelistic model here.
========No, it doesn’t work in IE6. If you’re still using IE6, why not upgrade to Firefox? It’s free.============
Going to all the trouble to write some CSS that isn’t 99.5% cross browser compatible (IE, FF, Safari, Opera, K etc.) seems like a waste of time.
While the effect is neat, do you really expect someone to be able to use this in a commercial application? Excluding IE6 – and like it or not, it’s still 80-90% of the browser market – and probably even higher in the business realm (for better or worse) – just doesn’t make any code practical to actually use.
Nice try, but any solution that isn’t compaitible with all web browsers is a waste of time. I personally prefer Firefox myself, but you are a fool to think that nobody else is using IE. Simply telling your viewers to upgrade to Firefox is a very bad approach to this.
Simply position a second paragraph below the first paragraph, set its z-index lower and shift it over 1px by using positioning. This WILL work in IE6.
View the page without your stylesheet – or try copying and pasting the text on the page. You’ll get double text.
With this technique, your document will display normally without the stylesheet, and copy and paste will work normally too.
Ok, here’s a thought. Why not add some extra Javascript magic and generate the repeating text on the fly?
Put a class “shadowed” on the paragraph, and have a script go over the DOM searching for that. Create a span with the p’s innerText, attach it and voila. No need to clutter your (possibly static) markup with two sentences.
This technique is NOT compatible with all web browsers available today. However, it may be compatible with more browsers in the future — or you may have a use for it despite the lack of support in one or more browsers.
It might give someone else an idea for a better technique that DOES work in IE6.
I think if you were to add a subtle dropshadow to the headings on a website – so that visitors with some browsers saw the extra effect, while IE6 users only saw the basic heading – that would be perfectly acceptable.
Steve Smith has a good example of this philosophy on his site. He’s using the text-shadow property which only displays on the Mac. It’s so subtle you might have missed it the first time you saw his site.
This looks familiar
http://phoenity.com/newtedge/drop_shadow/
Cool technique, but a bit dodgy to be useful in everyday use. Let’s hope we’ll see more support for text-shadow soon
This technique would give any users of assitive technologies MAJOR headaches – as the text would be read twice!
If you do want to do this then using .js and the DOM is a much better solution (as an earlier comment stated).
Or just wait for decent CSS3 support.
“The CSS2 text-shadow property makes it easy to add a drop shadow to a web page’s text, but so far it’s only supported by the Safari browser for OS X.”
lies. konqueror of course supports it too, since Safari borrowed the rendering-engine from it.
“This looks familiar”
I’m glad I’m not the only one who thought this might be a good idea.
Try using the title attribute and attr(title) in your CSS — you’ll avoid having to rewrite your CSS whenever you change your text (keep style and content seperate).
“This technique would give any users of assitive technologies MAJOR headaches – as the text would be read twice!”
Are you sure? The text is generated by CSS – I’m not sure which screen readers support reading out CSS generated content… If it were and issue you could use a style sheet switcher to disable that CSS for those users.
If you copy and paste the text you only get one copy, not two — another obstacle to anytime you want to duplicate text on a page for stylistic effect.
“lies. konqueror of course supports it too, since Safari borrowed the rendering-engine from it.”
Yes. I should have said Webkit. There are more browsers than Safari that support this effect.
I’ve added an example of the CSS Drop Shadow used on a heading… I think it’s a better demonstration of how it could be used in a production setting.
I think you mean CSS3 at the beginning of the article when mentionen the text-shadow property
Text-shadow is part of CSS2… it’s just not very widely supported.
http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props
Some years ago I was working for a major organisation developing a its website back when Netscape had 30% of the browser market and Microsoft had 70%. The developers were testing in Netscape and refusing to test in Microsoft because they didn’t like Microsoft.
Is this sort of religious fanaticism still going on?
Maybe it’s me who’s crazy…
a similar technique that works in all the major browsers and may be more practical to put into use:
http://www.scottjehl.com/jsDropShadows/
I posted about this technique in Oct 2005. Funny how these things re-emerge over time.
Not sure. How is it that one needs to go beyond the relative/absolute paradigm that you so wisely mention. Only two blocks of clean CSS code create first the relative text and second the absolute shadow. Only two extra statements are needed to apply z-index. Anyway, since the paradigm is so obvious, why not use the CSS3 shadow property? Think I’ll stick with the paradigm until CSS3 is fully supported.
Your before, after etc attr’s can only invoke compatibility nightmares, though such flip-flop code is surely [one more tiny] stimulus to fix standards for W3′s CSS3 shadow attr. Keep up the messy work!
Thanks for your FireFox warnings. I refuse to install FF simply out of fear for what it might do to my main design system. Gratis plus-plus to multi-box folks who make clean-cut compatibility assessments. I am not skilled enough to extrapolate workable solution from most of your Design MeMe tutorials – your explorations are thought provoking.
Nice article!
Thank you!