CSSで紙がふわりと浮かんだような影をつけたい

Question

###前提・実現したいこと
(例)CSSでこのように影をつけたい。

###発生している問題・エラーメッセージ

###ソースコード

ここにご自身が実行したソースコードを書いてください
.effect2 {
    position: relative;
}
.effect2:before, .effect2:after {
    background: none repeat scroll 0 0 #777777;
    bottom: 18px;
    box-shadow: 0 15px 10px #777777;
    content: "";
    left: 10px;
    max-width: 300px;
    position: absolute;
    top: 80%;
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    width: 50%;
    z-index: -1;
}
.effect2:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
}

---------------
```HTML

<li id="contents">
  <section class="fadein">
    <div class="image">
    <div class="box effect2">
    <img src="images/event_01.jpg" width="50%">
    </div>
    </div>
  </section>
</li>

###補足情報(Dw CS6使用)

Answer 1

ここのをそのまま実行するとうまくいきましたよ。
http://coliss.com/articles/build-websites/operation/css/css3-box-shadows-effects-by-paulund.html

Answer 2

画像の幅がエフェクト効果をつけた要素より小さくなっているのが原因じゃないですか？

上のCSSを見る限り、div.effect2にはwidthが設定されていませんので、
div.efftect2はwidth:auto、つまり横幅いっぱいに広がっています。
一方imgにはHTMLでwidth="50%"が設定されてますので、親要素の半分の幅しかありません。

なので、親要素につけた影の:before/:afterが丸見えになっている状態かと思われます。
div.effect2とimgの横幅が同じになるようにwidthを調整すると良いと思います。