:BefTer Drop Shadows

I just came across :BefTer Drop Shadows, a clever technique which uses the :before and :after pseudo elements to create drop shadows.

When I checked the original demo, I found that it works fine in Mozilla 1.6, Opera 7.5, OmniWeb 5b, Firefox 0.8 and Camino 0.8, all on Mac OS X 10.3.3. However, in Safari 1.2.1, the lower left corner is missing.

I had a look and found that adding

div.beftershadow img {
    display:block;
}

will make Safari display the lower left corner, without breaking it in any of the other browsers.

Posted on May 24, 2004 in CSS, Quicklinks

Comments

  1. May 24, 2004 by Quadsk8

    I have taken the width and height out of the style(-sheet) and now I can shadow every image with:

    <div class=”beftershadow” style={width:80px;height:80px;}> <img src=”images/ball.jpg” width=”72” height=”72” alt=”ball dus” border=”0”> </div>

    (just add 8 px to image size)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.