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 webtoolkit.info 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(){
createDropShadow(
getElementsByClassName(
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 ...
</div>


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 :)

3 comments:

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 http://dropshadowz.net

Anonymous said...

Thanks for your great example (http://www.3site.eu/examples/cssdropshadow/better.html) Andrea :) but the shadow effect, seems doesn't work with ie7. Have you got an idea to fix this ?

Emilie