CSS Trick: Drop Shadows

The always-useful A List Apart has a nice article up right now regarding drop shadows.  It covers how to use them with images as well as other types of page elements (paragraphs, blockquotes, whatever).

The nice part here is that it takes minimal extra markup (in a number of cases you probably wouldn’t need to add anything to what you already have), is compatible in pretty much all the browsers (and browsers that support the PNG image format get extra benefits!), and should degrade pretty well for those who can’t take advantage of the feature such as old browsers or those using screen readers.

Posted Wednesday March 3, 2004 in CSS Tricks by Chris Curtis

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.

Comments

I saw that article, and I particularly like how there are multiple solutions for positioning, and creating the shadow image to use.

So are you going to use that here to replace the faked hard-shadows?

By Derek Jones on March 3, 2004 at 04:03pm link

> So are you going to use that here to replace the faked hard-shadows?

No, probably not.  The code and :CSS: are pretty straightforward for images done this way, but for other arbitrary page elements (say, the headers) you have to add two levels of <div>s, which isn’t something I like.

If I were to do it anywhere on this site, it would probably be with the thumbnails (and maybe full images) in the Gallery section.  Probably won’t bother, though.

By Chris Curtis on March 3, 2004 at 04:14pm link

thanks ive been looking for info on how to do this.

By Greg Ferrell on March 3, 2004 at 04:52pm link

The only issue I’ve had with this method is that it’s tough to center an Image. When they released that article, I knew I’d want to use it for my photolog. I eventually had to change a few things on how I laid out my photolog in order to make it work well.

By Yoshi on March 7, 2004 at 05:30pm link

Leave Your Comment

Comments may be edited for content or deleted at any time. Civilized discussion is welcome. Anyone spamming, going way off topic, or otherwise being a jerk will probably be deleted or banned.

User Information

pMcode is allowed for comment formatting. pop-up mini reference

Personalization Options

Comment Security