Digg

The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.

CSS Drop Shadows

designmeme.com — 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.

Bury

TheAttacks 2 years 164 days ago, made popular 2 years 164 days ago

660 diggs
digg it

63 Comments
Who Dugg It?

shout, on 10/12/2007, -5/+15Great but it doesn't work in IE 6 which is like most of your traffic I would assume.
- TheAttacks, on 10/12/2007, -3/+26Well, this article brings something to light, IE7 will be featuring support for CSS2, but CSS3 is almost ready to hit the scene. . .will IE7 support it or will we have to wait 10 years for IE8?
- stuartr, on 10/12/2007, -6/+9I have about 3 times the Firefox visitors compared to Internet Explorer visitors. Although IE is still 5 times the number of Safari visitors.
- shirini, on 10/12/2007, -0/+12I think there needs to be better overall support for browsers. This is just a hack until CSS3
- h2d2, on 10/12/2007, -1/+6stuartr: Well, it depends on who your audience is. If you cater to geeks and nerds, then of course Firefox users will be your # 1 visitors. But that's not true for general web traffic. IE is still the king of the hill there, ask Yahoo! or Google for their web stats...
- Spybot, on 10/12/2007, -5/+15yawn......who cares? ok so now we can put a drop shadow behind text and make it unreadable....whooopie.
  
  i do this stuff for a living. there's no reason for this. let's get better standards out of the browsers that make sense.
  
  rounded corners via css only sans images? who cares? drop shadows on text? who cares? f you really know what you're doing you don't need to rely on1 browser out of 3 than can do something the rest can't when you can do it another way and make it work for all with standards. voodoo hokum
- Kirti, on 10/12/2007, -0/+3I agree with Spybot - It's really not worth the trouble..especially the trouble it takes to repeat the text twice over. And it's also significantly harder to read than the CSS2 standard due to the hard 'shadows'. And I'm not saying that the CSS2 standard is any easier to read.
- pbjorge12, on 10/12/2007, -0/+4"will IE7 support it or will we have to wait 10 years for IE8?"
  Bill Gates was talking about a new release every 6 months...They definitely need to or firefox will gain more market share...
- ywong137, on 10/12/2007, -1/+2"even if it only enhances their design for a relatively small number of users."
  
  Yes, exactly. Thanks for your tutorial. Now we can see a NEW irritating design feature pop up everywhere on myspace within the week.
- Bogtha, on 10/12/2007, -0/+2> IE7 will be featuring support for CSS2
  
  No, Internet Explorer 7 will be featuring *some* support for CSS 2. They still haven't implemented whole sections of the specification such as tables and generated content. For that we'll have to wait for Internet Explorer 8.
radison2, on 10/12/2007, -16/+3Why in the world would they drop shadows? I love shadows....bring the shadows back!!!!
pickupjojo, on 10/12/2007, -3/+9Their shadows are so ugly!
Now, It's really better with Safari...
- thebellmaster1x, on 10/12/2007, -1/+9Very true. The fake shadows just look like embossed text.
EssPii, on 10/12/2007, -5/+21Drop shadows not bombs!
revmitcz, on 10/12/2007, -1/+13I'm tempted to report this as "inaccurate", on account of the description saying "other browsers including Firefox" when it's more like "another browser, Firefox". I'm sure this works in the latest version of Opera, but as much as I'm sure most of us hate IE, it's a necessary evil and if it don't work in IE6 - then it just plain don't work.

Moreover, it's hardly a drop shadow, and seems like a complete waste to double write all text. How's that supposed to work in a blog setting, etc?

All in all, not too cool.
- pingveno, on 10/12/2007, -1/+9*Stabs all IE 6 users*
  Okay, now it works!
- stuartr, on 10/12/2007, -0/+1I think it's impractical to use in a lot of production settings -- but a blog would make it easy to implement. For wordpress just use the_title for both the text and the title attribute.
- NoMoreNicksLeft, on 10/12/2007, -0/+2I love this attitude. Were you around in 1993, telling all of us that because it didn't work for ftp index files, that we should give up this foolish "webpage" thing?
  
  Same thing here, only there's more difference between IE and a real web browser, than there is between ftp and http.
- Gardenhead, on 10/12/2007, -0/+2This effect works with any webkit browser, not just Safari. Shiira manages to render it just fine. Except for the fact that it was stupid, that was a problem.
misaxi, on 10/12/2007, -0/+1Is there any measure to support shadows both in IE and non-IE browsers?
And how to identify the browser and use the CSS more smarter?
CSS brings pain and surprise to the web designer.
- kevin45, on 10/12/2007, -7/+0browsercam.com
- tybris, on 10/12/2007, -0/+1Generating a shadowy png server-side. (and applying filter hacks to IE)
modshark, on 10/12/2007, -3/+1actually both of those drop shadows on the 2nd page work in firefox, might want to update your information...
- bigdogg019, on 10/12/2007, -0/+0Looking at the articale in FireFox 1.5.0.4, the first drop shadow does not work. I see it in the second box, but according to the article it is a screenshot and not the browser rendering.
- mrASSMAN, on 10/12/2007, -0/+1..you can tell when you highlight them.. highlight the first box - you can see the white text. highlight the second box - the entire box is highlighted because it's an image.
kevin45, on 10/12/2007, -5/+4Blah... barely 1% of your viewers would even notice or appreciate the effect.

Use what you need. You don't have to use every CSS tag in the book.
iDealL, on 10/12/2007, -1/+5This technique has been around for ages, sure the article was posted today but so what? It's like discovering Google for the first time then writing an article about it.

Woohoo horrid drop shadows, someone break out the party hats!! Woo woo woo!!
icoms, on 10/12/2007, -1/+8Text is difficult to read..useless
fernyb, on 10/12/2007, -9/+3Another reason why the Macintosh is better.
- iDealL, on 10/12/2007, -10/+5Yea Macs are better because its browser supports a feature that absolutely no one cares about, spot on buddy!
- cmiller1, on 10/12/2007, -3/+9no, but the macintosh does have a very versatile text toolkit that lets you have nice dropshadows like that in any program, one of many things unavailable to windows developers
thespace, on 10/12/2007, -6/+5not another css drop shadow story!! no digg

P.S. go out and buy an Adobe Flash book, I promise you, by the time css3 becomes standard, flash will have taken over the market.
- jccalhoun, on 10/12/2007, -0/+2If flash takes over the market, kill me now. And all the blind people will be up in arms too since most flash designers don't bother to make flash text reader compliant.
Baum, on 10/12/2007, -1/+8Konqueror supports drop shadows too...
- jayKayEss, on 10/12/2007, -6/+1YESSSSSSSSSSS!
- shakin, on 10/12/2007, -1/+4Of course it does. Where do you think Safari gets its code from?
  
  I like Safari and all, but sometimes I don't think the Apple fans give credit where it's due. The Konqueror team has done a great job at building their KHTML engine. Apple's input has certainly improved it, but KHTML has been great for years.
- drizek, on 10/12/2007, -0/+3Konqueror actually supports doing two text shadows instead of just one like safari does.
- justintime32, on 10/12/2007, -0/+2Yes! I hate it when people say something like, "This is really cool, but it currently only works in Safari..." when in fact it works just as well in Konqueror too. Like the Acid 2 test... Konqueror was the second browser to pass it, but you don't hear that anywhere.
  
  And yes, drop shadows are definately cool. It annoys me that Firefox doesn't support it yet but Konqueror/Safari do.
valis, on 10/12/2007, -2/+5IE has supported such things as glow and shadow for a while. Not saying it is standards compliant or anything, but it works.

Just saying.

Reference: http://www.webdevelopersnotes.com/tips/html/39.php3
valis, on 10/12/2007, -4/+1(edited: double posted)
FlakPyro, on 10/12/2007, -1/+3Looks fine in Konqueror 3.5.2 but i believe safari uses some KHTML code?
dmron, on 10/12/2007, -1/+5Drop shadows on text? Can you imagine how horrible the web would be if people actually used that???

Marked as lame - sorry, I want as few people as possible to be exposed to such a horrid idea.
- stuartr, on 10/12/2007, -0/+2Here's a nice site that uses dropshadows for the titles (visit with Safari):
  http://orderedlist.com/
  
  White text, white background, black dropshadow isn't the only combination... you can make it a bit more subtle than that. It also looks better on larger text (eg. heading) than paragraph text in my opinion.
Petrarch1603, on 10/12/2007, -5/+1how do I add shadows to my myspace profile?
- deesine, on 10/12/2007, -1/+5Nows there's two things I hate about the internet, myspace & drop shadows for text.
  
  Aaaaarrrrrrrrrggggg!!!!
  
  [wildly swinging my sword]
derosion, on 10/12/2007, -2/+3Tomorrow, we learn how to make Animated GIFs and revert to Times New Roman for all your online content. If the poster feels generous, we might get a special tutorial on Tiled Backgrounds.
slythfox, on 10/12/2007, -0/+2With just a slight bit of editing, it does work.
See for yourself:
http://www.quate.net/newsnet/read.php?id=45
zzz@tkz, on 10/12/2007, -1/+1Doesn't work in me firefox :P Well, it works, but it doesn't look like the safari example. It looks like white text with a black copy of the text behind it. Anyone else see it?
quade, on 10/12/2007, -0/+2As much as I hate IE, if it doesn't work in IE (~80% of Internet users), then it doesn't work.

IE6 is the new Netscape 4 -- a bane to innovation and ease of development.
ronaldpoi, on 10/12/2007, -0/+1interesting but useless (at least until css3 comes up for real)
dkoder, on 10/12/2007, -1/+1looks great with flock...
zephc, on 10/12/2007, -0/+2for IE, if there is anything like the 'content' attr, try using something like content: expression(this.title);

EDIT: nevermind, i saw the comment above using the FONT tag. Still, using content: expression() would be a good way to get the inner html for the span and apply it to the FONT tag bit. In either event, its more effort than its worth for drop shadows :-P
drizek, on 10/12/2007, -2/+1...
Loyaleagle, on 10/12/2007, -1/+1this really looks pretty ugly to me
roamzero, on 10/12/2007, -0/+1CSS Drop shadows usually only look nice on pixel precision text. They looks like ass if users have cleartype enabled, which blurs everything..
gypsyjoe, on 10/12/2007, -1/+1"so I decided to create a similar effect using the CSS"

I think the problem is that the result doesn't look anything like the original.
somerandomnerd, on 10/12/2007, -1/+3"* Disclaimer
No, it doesn't work in IE6. If you're still using IE6, why not upgrade to Firefox? It's free."

Maybe;
Because I'm not using my own computer.
Because I'm using a PDA.
Because my browser is tied to a screen reader, or other device to help me surf the net without a disability hamering my experience.
Because I'm at work and don't have administrative priveleges.
Because I can't be bothered.
Because I don't have time.
And because the browser wars are over, and unfortunately Internet Explorer won.
- ThankTheCheese, on 10/12/2007, -0/+1exactly, it annoys me too. (though I'm not sure about your last point. Not over by a long shot IMO)
  
  And to follow your accessibility train of thought; wouldn't creating two paragraphs of text placed over the top of eachother make screen readers read the text out twice? That would get really annoying for visually impaired users.
- somerandomnerd, on 10/12/2007, -0/+2The browser wars, in the sense of the netscape/explorer "this page is best viewed in .... (because it uses their proprietary tags) is over. It's true that there's still a browser war going on, but now it's "this page is best viewed in any browser that follows standards" vs "this page only works in IE because I don't know what I'm doing."
  
  Browser Wars 2.0...
stuartr, on 10/12/2007, -0/+1I've added an example of a more subtle use of the effect used on a heading.

http://www.designmeme.com/articles/dropshadows/

This replicates the same look I saw on a production site this morning.
Login or register to add a comment

Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.

CSS Drop Shadows

Login or register to add a comment