Drop shadows via CSS

  • Geronimo

    (@geronimo)


    22 years, 10 months ago

    Ok, I know i have bookmarked a very good tut on how to create drop shadows for images using only CSS and no image files called, but atleast it seems lost. alpha something or other. Just wondering if someone knows what I am talking about and has a link.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Matt Mullenweg

    (@matt)

    22 years, 10 months ago

    I can’t think of anything offhand but if I come across it I’ll post it here. Also if you find it be sure to post it.

    Dougal Campbell

    (@dougal)

    22 years, 10 months ago

    Those sites are both using IE-specific functions. Which is fine if the vast majority of your viewers are using IE, and you don’t mind others missing out on the effect.
    You could always try something simple like:
    /* add a gray “shadow” */
    #content img {
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    }
    It’s not fancy, but it’s easy as pie.
    If you want something fancier, you could add a wrapper div around your image.
    <div class=”shadow”>
    <img class=”photo” src=”…” />
    </div>
    div.shadow {
    background-color: #999; /* gray background */
    /* must set the size explicitly to the same as your image */
    width: 320px;
    height: 240px;
    }
    img.photo {
    margin: -3px 0 0 -3px; /* move the image up/left by 3px */
    }

    Thread Starter Geronimo

    (@geronimo)

    22 years, 10 months ago

    Thanks, I will try those out soon.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Drop shadows via CSS’ is closed to new replies.