CSS Drop Shadows II: Fuzzy Shadows

by
Published in Browsers, CSS, Graphic Design

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it.

Article Continues Below
Article Continues Below

We thought wrong.

The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. Most notable among the latter was Phil Baines’ method for keeping the markup simple when dealing with paragraph drop shadows. We are indebted to him.

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow). Given that the shadow image is effectively clipped at those points, we felt this was an unavoidable inconvenience, chiefly due to Internet Explorer’s inability to display PNG’s transparency natively.

A cat's nose
A cat's nose



blowup of shadow detail


Then Jan pointed out a technique for making Internet Explorer render PNG’s alpha channel correctly. It works by activating Explorer’s AlphaImageLoader filter (previously discussed in this ALA article), but does so in an inobtrusive way which requires no extra javascript code. We think it’s a godsend. Combining this technique, some image trickery and our “fake shadow offset” method, we’ll be able to make properly fuzzy shadows that work across browsers.

In this article we’ll learn how to:

  • Hide a stylesheet from non-IE browsers so it doesn’t affect document validation.
  • Coerce IE5.5/IE6 into displaying PNG transparency correctly.
  • Use the above to create fuzzy shadow edges for our Drop Shadow effect.

First, we’ll fabricate our fuzzy shadow edge. To do this, we must create an inverse shadow in our image editing program. Usually we’d use a black shadow over a background color. For this effect, we’ll need a colored shadow. It must be the same color as the background over which we’ll apply the effect.

Start with an image like the “fake shadow offset” we described in the previous article. This one should be thinner than before (about 3px thickness for a 6px shadow has worked out well for us). Our examples will use white as background color. When reproducing this technique, adjust for yours.

We’ll apply a “Drop Shadow” effect to this image, taking care to specify white for the shadow color. A strong shadow is desirable — the stronger it is, the faster your shadow will seem to fade. We should now have something that looks like this:

Fake Shadow offset image


Save this image as a PNG with full transparency. We’ll use this file for IE5.5, IE6 and standards compliant browsers. Make a regular version sans shadow with thicker offset (as seen in the previous article) and save that as a GIF file. We’ll feed this one to IE 5 (which does not support the AlphaImageLoader filter). Here are sample files for your perusal: PNG/GIF (Check them on an image editing program, since they will look like white on white in your browser).

Since we now have a solid color at the edge of our offset, we’ve effectively given up on the possibility of having a transparent shadow, so we’ll use a simple GIF for it. Make sure you apply the effect over the background color you’ll use. Here’s our example shadow: GIF.

The markup for this effect will be two <div>’s around our image/block element.

<div class="alpha-shadow">
  <div>
    <img src="img/test.jpg" alt="just a test" />
  </div>
</div>

The basic technique is still the same: We’ll set up the fake offset (with its inverse shadow) as background of the innermost <div>, and the shadow as background of the outermost one. When overlapped, the transparency of the PNG will seem to gradually dissolve the shadow image until it becomes the solid background color. The tricky part is making this work in Explorer.

Illustrated process


Our CSS is pretty much what we had seen in the previous article:

.alpha-shadow {
  float: left;
  background: url(img/shadow1.gif) »
  no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.alpha-shadow div {
  background: url(img/shadow2.png) »
  no-repeat left top !important;
  background: url(img/shadow2.gif) »
  no-repeat left top;
  padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
  background-color: #fff;
  border: 1px solid #a9a9a9;

  padding: 4px;
}

If you look closely you’ll notice we’re still including the non-fuzzy GIF offset (shadow2.gif) as background of the inner <div>. This is for the benefit of Internet Explorer 5.0, which doesn’t support the AlphaImageLoader filter. As it stands, this code will apply to all versions of Explorer. To make adjustments for IE 5.5/6, we’ll create an extra CSS file.

ie.css#section2

To activate the AlphaImageLoader filter in a simple and reliable way, we’ll first include it in its own CSS file and name it ie.css. We know this is shameful and will probably make the Standards Squad put a price on our head, but we’ll hide this file from other browsers later, so it’s ok. Kind of.

Our ie.css stylesheet will look like this:

.alpha-shadow div {
  filter:progid:DXImageTransform.Microsoft»
.AlphaImageLoader(src='img/shadow2.png', »
  sizingMethod='crop');
  background: none;
}

The AlphaImageLoader filter supports two sizing methods: crop and scale. We’ll use crop for our offset (scale fits the full image into the block, and is not what we’re looking for). Since the filter is somewhat limited and does not support CSS-like image positioning, we’re stuck with shadows that drop down and to the right (the image on its default position is all the way to the left and top).

We should note that, since the filter places the image in the foreground of the block element rather than as its background, this technique could be set up to show fuzzy shadows in Explorer with only one <div> surrounding the image, and show the hard edge shadow for other browsers. Not being ones to reward bad browser behavior, we’ll stick to the technique with the extra <div>, which gives us a fuzzy shadow in almost every browser under the sun.

The second line, where we set the <div>’s background to none, is there in order to remove the GIF offset we specified in the CSS before. Since we’ll only feed this file to IE5.5 and IE6, IE5 keeps the GIF offset (and thus displays a hard edge shadow). The rest of the browsers ignore that GIF file by the !important method we specified in the previous article.

Conditional Comments#section3

To hide the ie.css stylesheet from all browsers that don’t need it, we’ll use Conditional Comments, a Microsoft provided technique to serve content to specific versions of Internet Explorer. They are included in the html document and look like standard html comments, so browsers other than IE5+ ignore them (and so does the w3c Validator, which is convenient). We’ll insert this in the <head> of our document, after the CSS for the drop shadow:

<!--[if gte ie 5.5000]>
<link
  rel="stylesheet"
  type="text/css"
  href="ie.css"
/>
<![endif]-->

What that does is specify that the enclosed bit of code should be used by versions Greater Than or Equal (the gte part) to Internet Explorer 5.5 (it must be specified as 5.5000 because of Version Vectors), thus feeding IE5.5 and IE6 the special stylesheet.

That completes the technique. This may seem overly complicated just to achieve a fuzzy shadow, but then again, they say that God is in the details. As a plus, the mentioned techniques can be used to achieve all sorts of different effects.

Here, have a cat:

Cat on floor


Acknowledgements#section4

To Jan, who has been playing with this transparency thing for far longer than we have, to Phil Baines, for his suggestions on how to improve the methods exposed in the previous article, and to Ava McBride, for facilitating the use of the Browsercam service for testing of these techniques.

About the Author

Sergio Villarreal

Sergio Villarreal lives in México but spends most of the time in his head. He maintains a weblog and rarely updated webcomic at Overcaffeinated.net and makes a point of learning a new trick every day. Some are even useful.

80 Reader Comments

  1. i didn’t use the technique in the last article because the edge was unrealistic. this is much better.
    kudos.

    also in the first example… no hard edge shadow. checked it on Mac and PC…

  3. The last example doesn’t show softened edges on my IE version (6.0.2800.1106.xpsp2.030422-1633) running on WinXP Pro sp1.

    Has this been checked to run on IE6? What else could be wrong?

  4. now that I look more closely, in IE6, no fuzzy shadow for me either… same version as oVan.

  5. Here’s one I was going to write an article on:

    #topShadow
	{
	width: 225px;
		background-image: url(images/shadow_top.png) ! important;
		
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
»(src='images/shadow_top.png',sizingMethod='crop');
		
		background-image: none;
	}

    Basically by declaring the the first background-image “important”, Netscape/Moz and other compliant browsers (Safari) ignore any other declarations. No version of IE recognizes the important attribute. So it turns off the background-image. Which is good cause otherwise you get two background-images over lapping each other.

    I was working on this for some old code on an older site using tables and it worked fine. I then reproduced the menu using more CSS friendly code for the ALA article I was going to write. At which point the links broke in IE. When you remove the DX code, they work again. So something with the DX code and the way I wrote the CSS broke the links in IE. I’ve been trying to find a solution and haven’t been able too. Anyone have any ideas?

  8. There are a few errors in the markup, which is why currently IE is not actually displaying the fuzzy shadows and the first example’s hard shadow is a no-show. I’ve reported this to the editors, and all should be well in a while.

  9. Never produce an ALA issue when you’ve been sniffing glue.

    We apologize for the production errors and believe they have all been fixed.

  11. I just checked in IE 6 Win98 and not only is there no fuzz but no offset either.

    Otherwise, very nice. Looks real good in Firefox.

  12. Ok. Dan Benjamin ( http://hivelogic.com/ ) and I worked on the quirks for a while. It’s been fixed. Apparently, the url structure for the AlphaImageLoader filter does not follow *all* the rules for url specifying in CSS, so IE was getting confused with the ALA directory structure and couldn’t find the offset PNG image. Everything should look just fine now.

    If you have problems with this, try to keep a simple directory structure (the example code should work just fine).

  13. In opera 7.11 can’s see anything…

    just the image with a white padding and 1px border, nothing else

    no shadow @ all
    cheerz

  15. If you’re making an image that has to be the same colour as the background anyway, why bother with pngs at all?

    Nice hint with the AlphaImageLoader directly into css though. Thanks.

  16. James: The PNG transparency here is necessary just to make the shadow dissolve. Without PNG transparency that effect couldn’t be accomplished, because the shadow is clipped at that point.

    Panta: I’ve tested the technique in Opera, and it works fine. I’ll recheck it later to make sure.

  18. James: No, that wouldn’t work. If we had used a GIF, we’d have to have had another hook (extra div), or live with a crappy shadow border. The thing is, you can’t predict the size of the block, so if your offset image is a GIF it has to be a continuous “shadow end thingie” (like the PNG). That solution doesn’t produce a fuzzy shadow. It produces a “shadow that ends in an ugly thing that seems to emulate a degradation but doesn’t pull it off”.

    Another possibility is to have an extra hook. Then, you could indeed just make two GIF’s that represent the fuzzy borders and affix them to top-right and bottom-left of your divs. That would work, but you’d end up with three divs around your image instead of two.

  19. I hadn’t run across this article in my quest for drop-shadows for images, and I was unhappy with most options I found… so I created a little hack to make dynamic shadows, sized appropriately for any image, as shows on the URL included here. For static HTML I could have just put the background-image() in the CSS, but since the page is generated and the background-image URL is dynamic, I attach a style attribute to each element to get the appropriate shadow. (Disclaimer: this site most certainly does not work in IE, but the shadows themselves should I would think)

    I became interested in the shadows themselves, so I made this page to facilitate mindless hours of enjoyment.

  21. You are of course right. I should really stop and think more…

    The way I see it, if you’re already using 2, what’s an extra one gonna change? The snobs will already be choking on their noses and you avoid the extra markup the IE hackerage takes up. I suppose this would balance out with a lot of shadowed images weighing down the code with their uncached

    .

    Well, on further reflection; good article, chum.

  22. It should be noted that, if you don’t want the “frame” provided by the image border and padding, you can actually pull this off with just one

    . You’d just set the PNG as background of the image and give it the appropriate padding.

    I didn’t do that because, quite frankly, the naked images with shadows don’t look so good.

    Just a thought.

  23. I followed the tutorial but seem unable to get the grey border around the image working in IE6. It wokrs fine in Firefox and if I adjust padding within the class .alpha-shadow img, Firefox responds fine. However IE6 does nothing. Anyone has any idea what went wrong?

  24. Matt: Most likely, you don’t have a correct doctype specified. Make sure you’re using a correct doctype for XHTML 1.0 Transitional or up.

    If you don’t do this, IE 6 reverts to quirks mode and does what IE5.5 and IE5 do with the padding of images with border (namely — nothing).

  27. Re: sergio: Another possibility is to have an extra hook. Then, you could indeed just make two GIF’s that represent the fuzzy borders and affix them to top-right and bottom-left of your divs. That would work, but you’d end up with three divs around your image instead of two.

    I supposed, it looks like this?
    http://phoenity.com/tests/fuzzy_shadows.html
    I think this is (a bit much) better, though non-semantical, because I don’t quite like that extra ie.css …

  28. Yup, I guess it looks *exactly* like that =)

    Great job.

    There are about a million ways to skin this particular cat. I went the way I did in the article because I sort of dig the combination of techniques that lead to the effect. If I could, I’d have done it in under a

    . Still trying…

  29. Thank you very much for the tip! It solved my problem and everything is working fine now!

    Take Care!

  30. By the way: If you use the effect for thumbnails of a gallery (using the images to link to bigger versions), you can enclose the image in the anchor, set the anchor’s display property to display:block; and use it as the middle

    (thus pulling this off with just one

    and cheating a bit).

  34. Nice article, but I wanted to say the biggest thing I took out of this was the conditional comments on IE. This was the first I had heard of this, how long has it been floating out there?

    I haven’t had a chance to play with this yet, but doesn’t this seem like the best way to avoid all the IE hacks (box model, etc.) rather than confusing the compliant CSS?

    Drawbacks:
    1) You would have to make two stylesheets (but that second one would be pretty easy to make), 2) All of the folks using IE would have to download two stylesheets instead of one the first time they visit your site. (That seems like a small price to pay if you’re going to use IE…)

    Am I missing something? Why hasn’t this been talked up?

  35. “Am I missing something? Why hasn’t this been talked up?”

    I have no idea. I try to tell everyone I know, but damned if people just don’t want to hear.

    You’re right, this is a far better way to deal with IE’s broken box model since it relies on a *feature* of the browser rather than a *bug*.

    Cool drop shadows sergio. Now if you could just figure out a way to make it work on any color background 😉

  38. Yeah, I hadn’t heard of Conditional Comments either, until I started research for this article. Perhaps they will take… Who knows? They could be the new black.

    Lim Chee Aun: Not exactly. What I meant was to remove the middle

    and apply that style to the anchor instead.

    Glad people liked the article. And the cats. Can’t go wrong with cats. Or monkeys.

  39. With all possible respect to the authors of this article, I must, however, admit that creating “inverse” shadows, in my honest opinion, defy the whole idea of true alpha layer transparency, which is supposed to allow us, little eveil web designers, use PNG images over any underlaying visual stucture.
    YoungPup’s solution for IE 5+ was around for 3 years now:
    http://www.youngpup.net/2001/sleight
    All you have to do is create a “yourfuzzyshadow.png” image, and position it under whatever element you want to have a drop shadow.
    As for creating dropshadows for images, the easiest way to ensure consistency would be to make dropshadow (and border, if any) a part of the image itself. The default “sizingMethod” of “Microsoft.AlphaImageLoader” filter is “image”, which will display the image without cropping or scaling it.

  40. I may get flogged for this (hence the pseudo-name) by why do this? there is such a thing as the right tool for the right job. if you want a drop shadow on an image, use your graphics program. you already used it to create/edit the image, haven’t you? it’s just 2 more steps to add a drop shadow.

  42. ben http://www.alistapart.com/discuss/cssdrop2/4/#c7905 said:

    >>I may get flogged for this (hence the pseudo-name) by why do this? there is such a thing as the right tool for the right job. if you want a drop shadow on an image, use your graphics program. you already used it to create/edit the image, haven’t you? it’s just 2 more steps to add a drop shadow.

    You might do it on a dynamic site the client will edit via CMS.

    The client’s staff aren’t graphic designers in this scenario; they are content creators — editors and writers with some web tech expertise.

    They’ll be putting up new images every day.

    The drop shadows are part of the look and feel you’ve designed for the site.

    The client lacks the ability (or time or budget) to create drop shadow effects for 25 new images a day.

    The client doesn’t HAVE to do that work, because this technique ensures that a plain image inserted into the content will show up with a drop shadow.

    That would be one reason why.

    Similarly, we often create border and padding effects in CSS so that all images will appear to have, say, a colored border. The client may have no graphic design expertise at all, but that’s okay; the CSS does the work. Make sense?

  43. iG.STUDiO, all,

    I enhanced Youngpup’s Sleight (first in summer last year, n) so it also works with background styles (demo see attached URL). This code has recently been integrated into the already aforementioned very nifty IE7.

    http://dean.edwards.name/IE7/

    I like the generalised Javascript approach to fix IE’s shortcomings much better than handcrafting custom CSS for each project; and nothing’s going to deliver us from that shoddiness but taking the fortune in our own hands. If you know how to solve the outstanding problems or have ideas to contribute, get in touch with Dean. He’s a cool guy.

  44. apartness, I have a site that generates dynamic content much like you mention, and my solution was to write a little server-side code to generate the shadows dyanmically. Thus the HTML and CSS is very, very simple and the shadows get sized dynamically.

    Check out http://msqr.us/shadows/ as an example page I set up.

  45. msqr: I checked your solution and it looks nice, but doesn’t work in Explorer (any version). The PNG’s have a gray background and show the shadow over that.

  46. Hmm, they don’t work in IE, no. I’ll check that out. Once again IE makes things difficult.

  49. What’s this ? another article on how to make the web a holly mess!!!!

    just a test

    WHAT THE HELL IS THIS???????
    SHAME ON YOU….you self proclaimed web evangelist!!!!!

    i agree that W3C specifications are important to the web evolution….but the good attitude remains “IF YOU CAN’T MAKE SOMETHING WITHOUT MISUSING THE LANGUAGE … DON’T DO IT!!!!”

    with such usage of

    you show the world that your understanding of W3C recommendation is the understanding of a 2 years old Boy!!!

    a few years ago everybody was yelling at the guys from microsoft because of their implementation of HTML which was very exotic …. but doing such things you are doing the same….AND PERHAPS YOU ARE DOING WORTH.

    pffffff….i’m depressed…i don’t wish you a nice day

    Web evangelist???? no, WEB TERRORISTS !!!

  50. In all truth, hangon, I just do it to piss you off =)

    I am glad that I am doing WORTH. Always good to contribute something (if that was not your intended meaning, I suggest you revise your understanding of the English spec).

    That was a joke right?

    Just in case it wasn’t: The spec allows for that construct. It’s perfectly valid, if not semantically correct. We work with what we have.

  52. Well done on the article, and thanks for the name drop. I especially like the conditional comments thing.

    Now, how about another comic strip?

  55. … 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 tag within two levels of

    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.

  56. 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.

  57. 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.

  59. 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…

  60. 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

    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

    ‘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.

  61. 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.

  62. “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!

  63. 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.

  64. 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.

  65. 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…

  66. 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.

  67. 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?

  68. 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!

  70. 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…

  71. 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.

  73. 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.

  74. 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?

  75. 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…!!!

  77. 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????

  80. 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

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA