Discuss: CSS Drop Shadows II: Fuzzy Shadows

by Sergio Villarreal

1 nice

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…

posted at 07:53 am on April 23, 2004 by jim

2 Very Nice

I too had trouble getting the previous version to render to my liking. This renders much better. Thanks…

posted at 07:56 am on April 23, 2004 by David Hosting

3 IE6 problem

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?

posted at 07:59 am on April 23, 2004 by oVan

4 ditto

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

posted at 08:12 am on April 23, 2004 by jim

5 Another CSS Drop Shadow Technique.

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; } </pre>

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?

posted at 08:13 am on April 23, 2004 by Steven Schrab

6 Forgot the link

Whoops, I forgot the link:

http://www.megasmack.com/pngexample/final.html

posted at 08:14 am on April 23, 2004 by Steven Schrab

7 Floating and Safari

I tried copying this stuff to my site, but I don’t want my <div> to float:left, and the drop-shadow doesn’t render in Safari. Any ideas?

http://raibledesigns.com/page/rd?anchor=css_drop_shadows

posted at 08:26 am on April 23, 2004 by Matt Raible

8 Markup issues

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.

posted at 09:17 am on April 23, 2004 by sergio