CSS Drop Shadows II: Fuzzy Shadows

by Sergio Villarreal

80 Reader Comments

Back to the Article
  1. I forgot: The technique doesn’t use javascript, and it degrades well. I like to write things that don’t make lynx/w3m/cellphones go berserk.

    Copy & paste the code below to embed this comment.
  2. “Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.”

    That’s great and all, so is this method. But isn’t the whole point of sites like ALA to promote standards? What’s the point of a hack that breaks standards? Even if it is for IE… whose lax PNG support also irritates me!

    Copy & paste the code below to embed this comment.
  3. Sometimes ALA authors get lazy and quickly jump to switching stylesheets ans hiding them from some browsers, which in my view should be a last resort.

    Copy & paste the code below to embed this comment.
  4. Sometimes ALA authors get lazy and quickly jump to switching stylesheets ans hiding them from some browsers, which in my view should be a last resort.

    Copy & paste the code below to embed this comment.
  5. I should stop making comments for the simple sake of not offending anybody. Please… I didn’t mean to, I just wanted an explanation, sorry, if it sounded a bit critical (I like your website… :) :) :) ). And I didn’t diss your code, Sergio, I merely asked how and why did you arrive to this point.
    I think, that was Igor Stravinsky, who said once something like this (very loose quote): “If I had no limits to my resources, I would probably ended up not writing anything”.
    I think, I see it now. You don’t want tables, so you didn’t use them. I must admit (thanks to a slow day at work), this could really be fun:
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-div-gif.html
    (for some reason – poor CSS support in this particular part? – IE5.2 for Mac breaks the display, but who cares, it’s dead anyway… It works in IE6 Win, Firefox, and Safari, though)
    Once again, sorry, if my comments sounded apocalyptic…
    It’s all good. Keep up the good work.
    PS. The table-based markup is still shorter. Not cleaner, oh, no, just shorter…

    Copy & paste the code below to embed this comment.
  6. I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing – without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case.

    I’ll wait until CSS 3 is more widely adopted.

    Copy & paste the code below to embed this comment.
  7. We use a separate images server on our site and this:

    .img-shadow div {
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://images.ourdomain.com/shadow2.png’, sizingMethod=‘crop’);
      background: none;
    }

    does not seem to work.  Is there any way to use teh alpha transparency hack in IE on a “remote” image?

    Copy & paste the code below to embed this comment.
  8. We get a suprisingly large chunk of Netscape 6.0 visitors to our sties.  My site and your dropshadow example both fail to show the shadows in Netscape 6.0.  I don’t know if this is related but the “Acknowledgements” text is positioned on top of the Free Cat picture.

    This drop shadow method works well in all other browsers and let’s out content writers quickly add some style to a otherwise flat page.  Thanks for the help. 

    I don’t understand why all the backlash against this technique.  It’s give us the flexability of applying drop shadows we need wherever we want without resorting to complex table designs.  Our graphic designers don’t have to waste time making two verisons of every image, and our content writers love the new trick they can pull off.  It’s valid, doesn’t use javascript, and isn’t to size intensive. Kudos ALA!

    Copy & paste the code below to embed this comment.
  9. Yep, it does.

    lots of lovely fuzz

    …excellent article Sergio!

    Copy & paste the code below to embed this comment.
  10. Quote:

    “I’m all for CSS advancement but this seems a bit overkill since a regular image with a drop shadow will achieve the same thing – without the fancy tricks. Trying to hack this or that just to satisfy browser quirks is not practical in this case.

    I’ll wait until CSS 3 is more widely adopted.”

    It could be useful for a number of reasons….

    i use it for a content management system where teh client can upload (varying sized)pics to his site, but he hasn’t the software or knowledge to give them drop shadows,

    this allows him to keep the pretty wee drop shadows that he so dearly wanted…

    Copy & paste the code below to embed this comment.
  11. John, I had the same problem with Opera 7.0 but fixed it with “br clear=all” and “clear:both” properties for several HTML elements. In fact I don’t have the Netscape 6 on my machine but my photo site should work on it. You might check it and then have a look at the source.

    Copy & paste the code below to embed this comment.
  12. Does this technic or a similar one work for tables ?

    Thanks.

    Copy & paste the code below to embed this comment.
  13. It’s definitely a cool technique, but I really think it’s a lot of effort (and discussion) over a teeny, tiny bit of return.

    A poster early on said that the hard-edged drop shadows were too ugly to use, but now that they are nicely fuzzy they like them.

    That’s just TOO much attention to detail for me.  I think my attention is more productively used elsewhere on site design & maintenance.

    But the article WAS well written, and I appreciate the effort that went into it.

    T.

    Copy & paste the code below to embed this comment.
  14. I can’t get this to work under xhtml strict or 1.1 – I get an ugly lower padding for the inner div… if I do padding: 0px 5px 5px 0px;  the Safari and Firefox don’t display properly… if I do padding: 0px 5px 0px 0px; then IE doesn’t display properly… any ideas?

    Copy & paste the code below to embed this comment.
  15. OK, I wrote too soon: the shadows work fine in strict xhtml if you add the following to the img css: vertical-align:bottom; (leaving padding: 0px 5px 5px 0px; for the div). I actually discovered the answer on http://phoenity.com/tests/fuzzy_shadows_anchor.html – thanks to Lim Chee Aun who was the only person I found to implement a version of Sergio’s method in STRICT rather than transitional…!!!

    Copy & paste the code below to embed this comment.
  16. this thing isn’t working for me…
    can you check it at http://radon.ytra.net/css/ ?
    thanks

    Copy & paste the code below to embed this comment.
  17. Try removing the » character from your CSS code. That one got me too.

    But I’m having a problem, I’m not getting the rounded corners when I do this through an external CSS file. Works fine when done from the head though…

    Bizarre????

    Copy & paste the code below to embed this comment.
  18. http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html

    Copy & paste the code below to embed this comment.
  19. Great article.

    It seems that I’m suffering the same as Mr Schrab (http://www.alistapart.com/discuss/cssdrop2/#c7860) – I’ve got a css defined nav bar from an unordered list, but as soon as I pop in the DX code the links stop working in IE!

    Could someone please help?

    Copy & paste the code below to embed this comment.
  20. Hi,

    ALA rulez!!
    Question: I float an image and making a border is no prob. The drop shadow won’t float because I already used a float

    Should I use two div’s to overcome this problem?

    t
    Thx for any help.

    CU
    Chazz

    Copy & paste the code below to embed this comment.