CSS Drop Shadows

by Sergio Villarreal

82 Reader Comments

Back to the Article
  1. Sergio,

    Great article. Of course I went to try it out and it works fabulously. I have an image in the <div id=“header”> that floats to the left when the css for #header {text-align: center;}.

    In Safari I found I could alter the <div class=“img-shadow > and the image and drop shadows would take on the positioning of #header and be centered. Unfortunately this doesn’t work on Camino, Firefox or OW 4.5. All show a left floated image with frame and a drop shadow that floats to the right.

    What am I doing wrong or is this some quick to the mozilla browsers? You can see what I’m seeing at http://fragencosmeticsurgery.com

    Copy & paste the code below to embed this comment.
  2. Andy: when a block element is created, by default it assumes all available horizontal space. That is what you’re seeing (with the shadow going all the way to the right). The float, in this case, is very necessary. The element can be floated to left or right, it doesn’t matter, but it does have to be floated. Thus, positioning of the image must be done through fiddlement of the margin values.

    If you want to center the image you’ll have to enclose it in another div and center that.

    I’m working on some improvements of the technique, so there may be more to talk about later =)

    Copy & paste the code below to embed this comment.
  3. Sergio,

    Thanks for the reply. I took out the style=“float:none;” from the div and wrapped the img-shadow div like so.

    <div >
      <div class=“img-shadow”>
        <img….>
      </div>
    </div>

    And the image does not center. It floats to the left. Am I not centering the enclosing div properly?

    I look forward to improvements in the drop shadow technique because it’s great.

    Andy

    Copy & paste the code below to embed this comment.
  4. Andy, I think that is not properly centered. There is an interesting discussion on how to center a div (one would think this would be simpler, right?) at Andy Budd’s site here:

    http://www.andybudd.com/blog/archives/000150.html

    Good luck!

    Copy & paste the code below to embed this comment.
  5. Sergio,

    You’re my hero. Andy Budd’s page worked. It only took me 30 min to figure it out though. I added 2 divs around the object to be centered with the following css

    .centerWrap
    {
    min-width: 400px;
    text-align: center;
    }

    .center
    {
    margin: 0 auto;
    text-align: left;
    width: 250px;
    }

    Andy’s width of 600px didn’t seem to center the image for me but using a smaller width of 250px and a min width depending upon how narrow you’re willing to let your browser window collapse seems to work great.

    Thanks. Now can’t there be a simpler way?

    The only problem I see is in Camino 0.7 I loose part of the drop shadow. :-(

    Andy

    Copy & paste the code below to embed this comment.
  6. Very interesting. But It looks to have very limited usage.

    Copy & paste the code below to embed this comment.
  7. I really think you guys are doing a great job coming up with solutions in CSS.

    I really which that CSS actually separated content from presentation though.  If CSS really worked than all you should need in the HTML is

    <img class=“myshadowcssclass”>

    Anything more just shows that CSS needs another iteration or two before it really delivers the promise of separating content from presentation.

    To take it even further, if CSS really worked then using only image tags all with the same class you could be able to format a gallery as in

    img1.jpg
    img2.jpg
    img3.jpg
    img4.jpg
    img5.jpg
    img6.jpg
    img7.jpg
    img8.jpg
    img9.jpg

    and have that show up in any format you want.  9 images vertically, 3 by 3, some other format including all the styles in iPhoto all only by changing the CSS.

    Who do we have to influence to get this thing done right?

    Copy & paste the code below to embed this comment.
  8. This effect really spruces up a gallery of previously flat images on a page. Makes for a much nicer display:

    http://www.larimer.org/photos/

    Copy & paste the code below to embed this comment.
  9. hello everyone…

    i’ve tested this script. it works fine when its in the <body></body> tag.

    but when its within another <div></div> tag.. it looks very weird!

    anyone experienced this before?

    cheers,

    vincent

    Copy & paste the code below to embed this comment.
  10. CSS3 has a box-shadow property just for this but no browser supports it yet.

    Copy & paste the code below to embed this comment.
  11. Thanks for the excellent write up.

    Copy & paste the code below to embed this comment.
  12. For those Safari users, once you update your OS to 10.3.4 (which brings Safari 1.2.2 I guess, or at least updates it), you will notice that your dropshadows (using the technique in this article) are aligned all the way left, so there’s no right-side shadow and it cuts off with the picture edge on the left.

    Anybody have a quick fix for this? Is it a problem with Safari’s CSS rendering? It still works in other Mac browsers (IE, NS). Should I submit a report to Apple?

    Copy & paste the code below to embed this comment.