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; 
		}

ドロップシャドウを作って回転させる事でめくった感じを表現します。例によって実装できないブラウザがありますが、css3はいろいろ出来て楽しいですね。rotateを加えない場合は以下のようになります。