11 IE 6 still no go

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.

posted at 11:43 am on April 23, 2004 by waylman

12 Fixed now

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

posted at 12:14 pm on April 23, 2004 by sergio

13 Opera issue

In opera 7.11 can’s see anything…

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

no shadow @ all
cheerz

posted at 12:39 pm on April 23, 2004 by Panta

14 confirmed

Yep, it works in IE6 now.

posted at 12:45 pm on April 23, 2004 by waylman

15 Overkill?

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.

posted at 02:11 pm on April 23, 2004 by James

16 Necessity, not overkill

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.

posted at 02:18 pm on April 23, 2004 by sergio

17 Re:Necessity, not overkill

My point is that you could use a solid gif image of the fuzzy end of the shadow to clip the the shadow.

posted at 05:11 pm on April 23, 2004 by James

18 GIF's? We don't need no stinkin' GIF's!!

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.

posted at 05:19 pm on April 23, 2004 by sergio

19 Dynamic fuzzy shadows

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 [url=“http://msqr.us/spot/”]this page[/url] to facilitate mindless hours of enjoyment.

posted at 05:22 pm on April 23, 2004 by msqr

20 should i say..

This URL:

http://msqr.us/ma/BrowseAlbums.do?key=MKhjolwv8mi0shtSpSXJLWt7xGs

which shows the dynamic shadows in action.

posted at 05:29 pm on April 23, 2004 by msqr