Raible Designs

CSS Drop Shadows

A List Apart has a new article on how to make CSS Drop Shadows that work in IE. The first article shows how to do it for all the other browsers. I dig the technique, so I've decided to use it on this site. To add it, all I did was add the following to the <head> of this page:

<style type="text/css">
    div.alpha-shadow {
        clear: both;
        float: left;
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow.gif) no-repeat bottom right;
        margin: 5px 0 0 10px;
    }
    div.alpha-shadow div {
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow2.png) no-repeat left top !important;
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow2.gif) no-repeat left top;
        float: left;
        padding: 0px 6px 6px 0px;
    }
    div.alpha-shadow img {
        background-color: #fff;
        border: 1px solid #a9a9a9;
        padding: 4px;
        margin: 0;
    }
</style>
<!--[if gte ie 5.5000]>
<link rel="stylesheet" type="text/css" href="http://www.alistapart.com/articles/cssdrop2/ie.css" />
<![endif]-->

Then I wrapped the following image with:

<div class="alpha-shadow">
  <div><img src="..." alt=""/></div>
</div>

If I decide I like this, I'll make sure and download the images/stylesheets locally so not to hog bandwidth from alistapart.com. Too bad there's not a technique to make text drop-shadows work. To see what I mean, see my Struts Resume demo. All the <h1> tags (titles) should have a drop-shadow - and they do in Mozilla, Firefox and Safari (but no go in IE).

The real question is - how do I get it to NOT float:left, but still get the drop-shadows to work? I guess I'll have to ask that question on alistapart.com.

Hmmmmm, my version doesn't work in Safari, what's up with that?!

Posted in The Web at Apr 23 2004, 07:59:47 AM MDT 8 Comments

Comments:

Not working on Moz 1.5 either. I see a nice 'border' added around your little cutie, but no drop shadow. I see you reversed the margin: from "10px 0 0 5px" to "5px 0 0 10px". So you aren't pushing the image so far down, but more to the right? Also, you've added 4px of padding to the img, could htat be doing anything?

Posted by Lance on April 23, 2004 at 10:03 AM MDT #

Firefox 0.8 not showing the shadow, only the border.

Posted by Gabriel Mihalache on April 24, 2004 at 10:03 AM MDT #

Hey Matt, I figured out your problem here. For some reason the ALA URL without the www prefix initially comes back with 1 x 1 blank images. Once I added the "www." to the beginning of the image URL, the images loaded correctly as 800 x 800. Once I did this, even the image on your site showed the shadows correctly (browser or proxy cache I suspect). Therefore, I surmise that you can update those URL's with www and all will be correct, although I suspect a better solution is to relocate them to your site. Ciao, Chris

Posted by Chris Custine on April 25, 2004 at 09:47 AM MDT #

Thanks Chris. I also found another way to do this without the IE hack.

Posted by Matt Raible on April 26, 2004 at 09:35 PM MDT #

Did you ever figure out how to make the drop shadow without the float? Scott

Posted by Scott McClure on June 29, 2004 at 08:46 PM MDT #

Nope. But I never looked much beyond this post. ;-)

Posted by Matt Raible on June 30, 2004 at 01:16 PM MDT #

Hey this looks really cool. The shadows are always welcome on web pages with your shadow effect. Best part about this being: you dont need to manually edit all the images. Just wrap ur img tag inside the divs and you have it! Thanks for sharing ur thought too..

Posted by prem ypi on February 21, 2009 at 12:00 PM MST #

Posted by prem ypi on February 21, 2009 at 12:01 PM MST #

10+ YEARS

TWITTER

RECENT ENTRIES

Tag Cloud

CSS Drop Shadows