Akdora’s Blog

Programming, Oracle, Life, Fun

CSS Drop Shadows II: Fuzzy Shadows January 7, 2007

Filed under: CSS — Akdora @ 9:02 am

by Sergio Villarreal

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it.

We thought wrong.

The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. Most notable among the latter was Phil Baines’ method for keeping the markup simple when dealing with paragraph drop shadows. We are indebted to him.

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow). Given that the shadow image is effectively clipped at those points, we felt this was an unavoidable inconvenience, chiefly due to Internet Explorer’s inability to display PNG’s transparency natively.

Our CSS is :

.alpha-shadow {
float: left;
background: url(img/shadow1.gif) »
no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;

.alpha-shadow div {
background: url(img/shadow2.png) »
no-repeat left top !important;
background: url(img/shadow2.gif) »
no-repeat left top;
padding: 0px 5px 5px 0px;

.alpha-shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;

padding: 4px;

The markup for this effect will be two <div>’’s around our image/block element.

<div class="alpha-shadow">
    <img src="img/test.jpg" alt="just a test" />

Rest of writing and reference : http://www.alistapart.com/articles/cssdrop2


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s