css3で実装するドロップシャドウの応用・めくれた感じを作り出す

css3で新たに加えられたドロップ
シャドウを使って一歩進んだシャド
ウを作るTipsです。画像でよく使わ
れている、めくれた際に出来る様な
シャドウをcssのみで実装。

以下のようなシャドウをcssのみで実装します。

CSS3 でめくれた感じのドロップシャドウを

下部の両端にドロップシャドウがあると思います。良く見る手法ですね。これを画像を使わず、css3のみで実装します。

cssとHTMLのソースは以下。

htmlは以下

<div id="shadows">
    <article>
       <h3>CSS3 でめくれた感じのドロップシャドウを</h3>
      <p>下部の両端にドロップシャドウがあると思います。良く見る手法ですね。これを画像を使わず、css3のみで実装します。</p>
    </article>
  </div>

css

div#shadows {    
   width: 559px; margin: 20px auto; position: relative;
 }  
  
 article {
   background: #dcdcdc;
   -webkit-border-radius: 4px;  
   -moz-border-radius: 4px; 
   border-radius: 4px;
   padding: 1.5em; color: rgba(0,0,0, .8); 
   text-shadow: 0 1px 0 #fff;
   line-height: 1.5;
   text-align: left;     
   display: block;
                     color:#1a1a1a;
 }
 
                      /*ドロップシャドウを実装*/
 article:before, article:after {
   -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);   
   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);      
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);  
   position: absolute; 
   bottom: 15px; 
   z-index: -1; 
   width: 50%; 
   height: 20%; 
   content: "";       
   background: rgba(0, 0, 0, 0.7); 
 }
    /*右側のドロップシャドウを回転*/
article:after {                      
   -webkit-transform: rotate(2deg);    
   -moz-transform: rotate(2deg);   
   -o-transform: rotate(2deg);
   right: 10px; 
   left: auto;
 }
 /*左側のドロップシャドウを右側とは逆側に回転*/
 article:before {                 
   -webkit-transform: rotate(-2deg);   
   -moz-transform: rotate(-2deg);  
   -o-transform: rotate(-2deg);
                     right: auto;
   left: 10px; 
 }  