My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Monday, November 20, 2006

CSS dropshadow ? Sure, simple and unobtrusive !

My favourite italian portal wrote a post about a CSS based dropshadow solution.
It talks about this post.

I didn't know that article then only now I can tell You something about that:

  • graphic effects are good "only" for high bandwidth web surfers
  • dropshadow isn't important as page content
  • id attribute should be absolutely unique
  • markup language has a scope and should be used for this scope (sure, when it's possible)
  • 5 nested divs just to show a simple shadow effect aren't a cool solution (imho)

Since You can do the same thing using a really basic JavaScript function without a repeated id, nested obsolete elements and in a cross browser way with about 1.8 Kb of uncompressed and goo JavaScript, I think You should think about my alternative proposal.

The only things You need is a better CSS, not based on id but based on class name and a simple callback.
This is revisited CSS

/* CSS container shadow */
.shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
.shadow-container .shadow2,
.shadow-container .shadow3,
.shadow-container .container {
position: relative;
left: -1px;
top: -1px;
.shadow-container .shadow1 {
background: #F1F0F1;
.shadow-container .shadow2 {
background: #DBDADB;
.shadow-container .shadow3 {
background: #B8B6B8;
.shadow-container .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
/* CSS container shadow */

And this is simple callback example:

onload = function(){
document, "div", "dropshadow"

Now You can use a dedicated dropshadow div class name in every div that You want to modify.

<div class="container dropshadow">
Lorem Ipsum ...

That's all, just include ej basic file and my dedicated function and You'll have a cleaner page without nested divs overloads and ... bye bye nested divs :)


Andrea Giammarchi said...

... uhm, my wonderful low-cost hosting solution is down ... then, here You can find the example: unobtrusive dropshadow and here the alternative proposal without JS and wihout id too.

Anonymous said...

Thanks for this great info. Here is the easiest way to generate drop shadow

Anonymous said...

Thanks for your great example ( Andrea :) but the shadow effect, seems doesn't work with ie7. Have you got an idea to fix this ?