remote
     synthesis

Drop Shadows Using CSS

Posted on Nov 30, 2005

Found this on Digg this morning...a way to add drop shadows to your images using pure CSS that works in both Firefox and IE. While the author readily admits that the markup required is a bit ugly (it requires a total of 5 divs), the final result looks good.

Comments

I think just editing the image in Fireworks would be about 90% faster. Plus, I think it's hard to call this pure css since the corners are using css on a div to place an aditional image. Seems like it could cause more problems than we would normally expect from an image.

I like using pngs with alpha channel shadows and not using the IE (Aiiieeee!) hack to make them work. That way the broken images can be used to entice people to switch to FireFox. It's fun.

Is that going to be fixed in IE7?

Posted By Mike Rankin / Posted on 11/30/2005 at 7:49 AM

I don't know about Fireworks per se, as I'm a Photoshop guy, but it's hard to imagine anything being faster than my technique. That's not me being snobby; I just mean that I came up with my technique specifically so I could take an unaltered photo and drop it into a page with no extra work at all, and have the browser matte and shadow it for me. The idea is that you have to do zero extra work with this technique, once you've created the style sheet and necessary images.

Of course my technique isn't perfect; no existing CSS shadow technique is. I think all CSS shadow techniques right now are temporary stopgap measures until CSS3 and its box-shadow property start showing up in browsers. The only thing that distinguishes my technique from the existing ones is that mine produces four-corner, three-sided shadows, which are more complicated to implement than the two-side, two-corner shadows described in other tutorials.

It's my sincere hope that my technique, along with all the others like it, becomes obsolete as soon as possible. The sooner CSS3 happens, the better for everybody.

Posted By Jeff Harrell / Posted on 11/30/2005 at 11:38 AM

I love what they do at Airliners.net, but I'm not sure if it's IE only. But it's definetivelly pretty beautiful.

[]'s
Alex

Posted By Alex Hubner / Posted on 11/30/2005 at 12:38 PM