Most effective way to build box shadows with 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.

Answer 1

Onion skinning is my personal favorite.

An example can be found in this alistapart article.

Answer 2

This is now very simple to achieve:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

First value is the horizontal offset. Second value is vertical offset. Third value is spread of blur effect. Fourth Value is color.

Additionally, you can add another value of inset, which will make the shadow appear on the inside of you block element:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

This is now very well supported: https://caniuse.com/#feat=css-boxshadow

Answer 3

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.