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

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

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

2つの影を横に並べて回転させ、角の部分をはみ出させる、という感じです。いい発想ですね。以下を参考にしました。
via:nimbupani

URL :
TRB :

Comments & Trackbacks (3)

  1. nightfall uggs

    Excellent article, bookmarked for future referrence!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services