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

ネット(net)を有効利用して勝ち人、価値人に変身出来るような情報をかちびと.netで配信します

Webデザイン

Webデザイン関連(RSS)のカテゴリです。

かちびと.netとは

貴方のネットビジネスを支えたい。かちびと.netはそんな思いを持ったサイトです。Web制作に役立つ素材やソフトウェア、Webサービス、マーケティングに役立つ情報などを配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAboutをご覧下さい。

About

Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

メニュー

かちびと.net

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

Cat: » WEBデザイン, cssやプログラミング
Day:7月 1, 2010

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を加えない場合は以下のようになります。