CSS shadows - A drop shadow roundup
Submitted by tom on Fri, 08/08/2008 - 04:10
I've come across loads of different techniques to create a browser based drop shadow effect. Some use only CSS whilst others need the help of JavaScript, some are cross browser friendly, others are not!
The aim of this post is to create collection of resources that show various techniques for creating CSS drop shadow effects. This was inspired by Smileycat's CSS Rounded Corners Roundup, which has proved to be a really useful resource for me, that I often refer back to.
Hopefully this will be a useful resource for other developers on their search for the best drop shadow technique - until of course, CSS3 hits the mainstream and all this is rendered a thing of the past - Yeah right, Like CSS3 will ever be ready!
The Lists
To make this a little easier to browse through, I have created two lists:
They are by no means definitive lists, but I think they include a decent enough selection to help you make an informed decision. If you know of any others please leave a comment and I'll add them to the lists.
1. Shadows for Images
| name / site | # of images | extra markup elements | comments |
|---|---|---|---|
| CSS Drop Shadows A List Apart | 1 or 2 | 1 | edges a little sharp |
| CSS Drop Shadows II: Fuzzy Shadows A List Apart | 2 or 3 | 2 | very effective |
| CSS Drop Shadow WebToolkit | - | 4 | a nice css only solution |
| Easy CSS drop shadows 1976design.com | 1 | 1 | nice and simple |
| yDSF - Robust CSS Drop Shadows Six Apart | 1 or 2 | 2 | |
| Drop Shadow Effect eyebulb.com | - | - | javascript + jquery |
| CSS Drop Shadow wubbleyew.com | 1 or 2 | 1 or 2 | |
| PNG Drop Shadows Position Is Everything | - | 4 | looks great but not supported in IE6 |
| Simple fluid drop shadows CSS play | - | 2 | |
| Onion Skinned Drop Shadow A List Apart | 3 | 3 | very effective |
| Onion Skinned Drop Shadow with JavaScript Ajaxian | 3 | - | requires javascript |
| Drop Shadows with CSS Shape Shed | 1 or 2 | 1 | |
| My contribution to the CSS shadow kerfuffle The Shape Of Days | 5 | 5 | as good as Photoshop! |
| An improved CSS shadow technique The Shape Of Days | 5 | 0 | as above, but with javascript |
| CSS Gradient Shadow Dynamic Drive | - | - | javascript |
2. Shadows for Text
| name / site | # of images | extra markup elements | comments |
|---|---|---|---|
| Drop Shadows kryogenix.org | - | - | for text, requires javascript |
| CSS : Text Shadows green-beast | - | duplicate text layer | |
| CSS for Heading Text Drop Shadows Sydney FX | - | - | little browser support |
Similar articles on this site
LATEST ARTICLES
TODAY'S MOST POPULAR
-
4th Sep 08
-
8th Aug 08
-
20th Sep 08
Comments
13th May 2009, 4:20am
This is a great resource, thanks for putting it together. I'm looking to fine tune my website, and possibly add some drop shadows for images.
My current site - http://tucson-labs.com - is totally lacking any depth and I think shadows might help out. I've been playing around with different methods, but it seems like you've pretty much covered all the bases. Thanks again.
8th Jun 2009, 3:51pm
Excellent Job!! Very useful post, thanks for all your effort.
I've been scowering the Internet all morning trying to find the best way to make drop shadows. You have organized the plethora of articles for us. Once I narrow down the best of the best I will refer to your article from my web developer blog in Raleigh NC .
Keep up the great work and thanks again!
17th Nov 2009, 6:00pm
Excellent resource. I never quite understood how to implement the corner tricks in css until now. I always thought it was a simple div on top of another one. Thanks for showing the right way.nayr
Please share your thoughts, comments and suggestions...