CSS Drop Shadows
June 12th, 2006
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.
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!