If you have been developing for the web, the request for things like “less boxy”, “rounded corners” and “drop shadows” have made you cringe more than once.
Now there might be plenty of design reasons not to have drop shadows and rounded corners, but for the times that it makes sense, here is a solution that will work for Firefox, Safari and Chrome*: [For those that ask what about IE, please read an interview with Dan Cederholm on Graceful Degradation]
Four images with incremental CSS applied
The above image show the same image with 4 different stylesheets.
The html is straightforward
<img src="/images/icon.jpg" alt="example" />
And the CSS for each image:
First Image:
img.game-icon {
}
Second Image:
img.game-icon {
padding: 4px;
background: #fff;
}
Third Image:
img.game-icon {
padding: 4px;
background: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Forth Image:
img.game-icon {
padding: 4px;
background: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 3px 3px 6px #ccc;
-webkit-box-shadow: 3px 3px 6px #ccc;
}
And that is it. IE works up to the first 2 images, then Firefox picks up “-moz” requests and Safari and Chrome picks up “-webkit” requests, all without IE choking on the requests that it doesn’t understand.
This of course is just the tip of the iceberg for what you can start to do with CSS3, including animations, delayed styles, pretty cool stuff. A quick Google search on “-webkit” or “-moz” will reveal a lot – happy exploring!
