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

No comments:

Post a Comment