CSS shadows - A drop shadow roundup
Posted by tom on 8th Aug 2008
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 |
Post new comment