Most effective way to build box shadows with CSS

Tags: css3 css
Question!

I'm interested to find which way of creating box shadows with css is most effective. But that I mean : ease of implementation, flexibility, and cross browser compatibility.



Answers
Onion skinning is my personal favorite.

An example can be found in this alistapart article.

By : brad


One way to do it, making it work easely and with cross browser coherency, is the jQuery Shadow plugin. If you don't overuse, it won't slow the page rendering. Otherwise, you could just wait until CSS3 becomes widely used ;)

By : voyager


The way I find most effective currently is this:

The CSS rules needed :

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

HTML code on which the CSS is applied:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

I found it very simple to implement, flexible and it works the same on FF 3, IE 6 & 7.



This video can help you solving your question :)
By: admin