CSS Drop Shadows II: Fuzzy Shadows

by Sergio Villarreal

80 Reader Comments

Back to the Article
  1. hilarious isn’t it?

    :D

    Copy & paste the code below to embed this comment.
  2. Well done on the article, and thanks for the name drop. I especially like the conditional comments thing.

    Now, how about another comic strip?

    Copy & paste the code below to embed this comment.
  3. Nice work and thanks for the acknowledgements. On my site I have another working example based on the new article:
    http://jotbe-fx.de/daily/photos/

    Copy & paste the code below to embed this comment.
  4. http://www.alistapart.com/discuss/cssdrop2/5/#c7906

    apartness said:

    >> ALA forum says, at the top of every forum page:

    So, what’s it doing at the top, when the text entry field is at the bottom? How about it right next to the “Add your comment:” line?

    Copy & paste the code below to embed this comment.
  5. … but I wasn’t satisfied by the answer I read regarding why CSS shadows are preferable over manipulating the images directly.

    If you think of your images as content, then it’s easier to understand the advantages of doing this with CSS.  As the look & feel of your site changes, so may your taste in image treatments.  By relying on CSS to handle these treatments, you aren’t forced to re-process all of your site’s images.

    On the downside, this particular treatment requires some rather unintuitive nesting of the <image> tag within two levels of <div> tags.  While the exercise of “massaging” HTML markup to make it stylesheet-friendly has been more or less accepted by designers, we must also accept that it deviates from the general philosophy behind CSS.

    Copy & paste the code below to embed this comment.
  6. Opera 7.0 PC doesn’t render the drop shadows in the last example image the cat) – This is probably triggered by the “float:left” property in the .alpha-shadow div {} declaration.
    Removing the float should fix it.

    Copy & paste the code below to embed this comment.
  7. Then the IE 6 will probably not show the left and top right fuzzy edges anymore when the float:left has been removed. Including the float:left into the special ie.css with the filter style will work.

    Copy & paste the code below to embed this comment.
  8. The good news: there is a CSS3 standardized method for this (the box-shadow property)
    The Bad News: no browser supports it yet

    Copy & paste the code below to embed this comment.
  9. I have been following this discussion for several days now, and I am still confused about the original idea.
    I will have to repeat myself:
    1. PNG’s alpha transparency is supposed to allow us grater flexibility in positioning images over anything else, while maintaining simplicity of markup.
    2. The situation with IE support can be resolved by many means (I still like the elegance of Aaron’s “Sleight” JavaScript behavior), here is an example:
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-png.html
    3. If we still have to match background color with GIFs, we could achieve the exact same results with a lot less effort by arranging elements in a table (yes, table – last time I checked it was still a legitimate HTML element – and, yes, it does support CSS formatting, so the separation of content and presentation shouldn’t be a problem):
    http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html
    Look… no JavaScript, no conditional comments, no separate stylesheet… I can go on.
    Please, explain to me, somebody, why we feel the need to scratch our left ear with our right foot? When nestind empty (therefore, not content-bearing, therefore – presentation-specific, so where is a separation?) DIVs became a better way of design than saving the coding efforts and assuring better browser compatibility by using (dreadful) table, which was created to retain rows-columns positioning by design, and perfectly works?
    Forgive me for being fossil, I just want to understand…

    Copy & paste the code below to embed this comment.
  10. iG.STUDiO: This particular approach was intended to minimize markup and maximize control of the effect. Here are some of the motivations behind my decisions:

    - I don’t want to resize an image with the scale control of the AlphaImageLoader filter. Mainly because it does an incredibly shoddy job (yes, I am very anal in design matters). Pixel perfect shadows is where it’s at for me.
    – I wanted good enough results for IE5.
    – I had already done another article on using one <div> to achieve a similar effect.
    – I use this technique all the time in my site ( http://overcaffeinated.net ), inside my posts. I don’t want to put a table in there, and two <div>‘s are acceptable to me.
    – I dislike rewriting html documents with javascript. It’s perfectly valid, but it doesn’t rock my boat.

    I don’t think this particular technique amounts to waving a dead chicken over the code, and I find it interesting how many people are complaining about it like it’s a signal of the apocalypse.

    There is a reason this is a followup article. This variant may not be for everyone, but people who like their shadows fuzzy and their markup clean may have an interest in it.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. “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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. Yep, it does.

    lots of lovely fuzz

    …excellent article Sergio!

    Copy & paste the code below to embed this comment.
  20. 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.
  21. 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.
  22. Does this technic or a similar one work for tables ?

    Thanks.

    Copy & paste the code below to embed this comment.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. http://homepage.mac.com/igstudio/design/css-js-dropshadow/shadow-gif.html

    Copy & paste the code below to embed this comment.
  29. 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.
  30. 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.