これだけでデザイン力アップ間違いなし!CSS3で作るBox Shadowエフェクト徹底解説

By@mtoksuyOn
これだけでデザイン力アップ間違いなし!CSS3で作るBox Shadowエフェクト徹底解説

最近はフラットデザインに押されて急速に使われなくなった感があるCSS3エフェクトなんですが、こうも使わないと忘れちゃいそうなので、今回はCSS3で作るエフェクトの再勉強を兼ねて記事を書いていきたいと思います。

初めに引用元を紹介します

Paulund

例のボックスシャドウなんですが2012年このサイトのエフェクトは日本に居るweb系の人ならば一度は見ているくらい有名になったんじゃないでしょうか?

敬意を込めて引用させて頂きます。

目次に戻る

CSS ボックスシャドウエフェクト - デモ & 解説

8種類のエフェクトがどう記述されていて、それがどう表示されているのかを解説していきます。

まず初めに、そのエフェクトをかけるボックスのCSSを見て下さい。

CSS
.box {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 2px 2px 2px 2px;
    height: 200px;
    margin: 40px auto;
    width: 70%;
}

まぁ、至って普通なボックスですね、これに全てエフェクトをかけていきます。

Effect 1

Effect 1

CSS
	.effect1 {
	    box-shadow: 0 10px 6px -6px #777777;
	}
HTML
	<div class="box effect1">
		<h3>Effect 1</h3>
	</div>

これはいたって普通の記述のボックスシャドウですね。

Effect 2

Effect 2

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
	<div class="box effect2">
		<h3>Effect 2</h3>
	</div>

隙間があるかのように影があります。美しい。

なにやらいきなり難しくなりましたね。

ですが、これは一つずつ手順を理解していけば簡単なんです。

まずこいつのカラクリを目で見ましょう。

Effect 2

このボックスの裏はこんな感じになっていて

二つのボックスシャドウを作り影だけを魅せているんですねー。

で、どうやったらそうなるの?って疑問があると思います。ここは少しトリッキーな事をしています。

CSSの記述を見てもらうとbeforeとafterで全く同じ記述ですよね?これは記述を減らしているんです。キモはafterでleft: auto; にすると取り敢えず固定ではなくなります。そしてright: 10px;をすると右からの表示になるんです。

後はz-indexやtransformをいじくるだけです。

そう、実は簡単なんです。

Effect 3

Effect 3

CSS
	.effect3:before {
	    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;
	}
	.effect3 {
	    position: relative;
	}
HTML
	<div class="box effect3">
		<h3>Effect 3</h3>
	</div>

これはさっきの片方バージョン。

Effect 3

裏はこんな感じ。片方ないだけなんで実装も簡単ですね。

Effect 4

Effect 4

CSS
	.effect4:after {
	    background: none repeat scroll 0 0 #777777;
	    bottom: 18px;
	    box-shadow: 0 15px 10px #777777;
	    content: "";
	    left: auto;
	    max-width: 300px;
	    position: absolute;
	    right: 10px;
	    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;
	}
	.effect4 {
	    position: relative;
	}
HTML
	<div class="box effect4">
		<h3>Effect 4</h3>
	</div>

片方逆バージョン。

Effect 4

このエフェクトもこうなっています。

Effect 5

Effect 5

CSS
	.effect5:before, .effect5:after {
	    background: none repeat scroll 0 0 #777777;
	    bottom: 25px;
	    box-shadow: 0 35px 20px #777777;
	    content: "";
	    left: 10px;
	    max-width: 300px;
	    position: absolute;
	    top: 80%;
	    transform: rotate(-8deg);
			-webkit-transform: rotate(-8deg);
			-moz-transform: rotate(-8deg);
			-ms-transform: rotate(-8deg);
			-o-transform: rotate(-8deg);
	    width: 50%;
	    z-index: -1;
	}
	.effect5:after {
	    left: auto;
	    right: 10px;
	    transform: rotate(8deg);
			-webkit-transform: rotate(8deg);
			-moz-transform: rotate(8deg);
			-ms-transform: rotate(8deg);
			-o-transform: rotate(8deg);
	}
HTML
	<div class="box effect5">
		<h3>Effect 5</h3>
	</div>

浮かせているような、そう思わせられますね。

これはエフェクト2とやっている事は似ていてシャドウの大きさを広げているだけですね、角度も少し強めに傾けています。

Effect 5

裏はこうなっていて、すんごい浮かんでいる感じです。影の力ってすごいですよね。

Effect 6

Effect 6

CSS
	.effect6 {
	    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	    position: relative;
	}
	.effect6:before, .effect6:after {
	    border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
	    bottom: 0;
	    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	    content: "";
	    left: 10px;
	    position: absolute;
	    right: 10px;
	    top: 50%;
	    z-index: -1;
	}
	.effect6:after {
	    left: auto;
	    right: 10px;
	    transform: skew(8deg) rotate(3deg);
			-webkit-transform: skew(8deg)  rotate(3deg);
			-moz-transform: skew(8deg)  rotate(3deg);
			-ms-transform: skew(8deg)  rotate(3deg);
			-o-transform: skew(8deg)  rotate(3deg);
	}
HTML
	<div class="box effect6">
		<h3>Effect 6</h3>
	</div>

ちょっとした膨らみとその影を表現したエフェクトです。やっぱりこうゆうエフェクトは紙系のコンテンツと相性がいいですね。

Effect 6

裏はtop50%の大きさの影を生成しborder-radiusをかけて丸みを帯びた影にしていますね。

素晴らしいです。

Effect 7

Effect 7

CSS
	.effect7 {
	    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	    position: relative;
	}
	.effect7:before, .effect7:after {
	    border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
	    bottom: 0;
	    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	    content: "";
	    left: 10px;
	    position: absolute;
	    right: 10px;
	    top: 0;
	    z-index: -1;
	}
	.effect7:after {
	    left: auto;
	    right: 10px;
	    transform: skew(8deg) rotate(3deg);
			-webkit-transform: skew(8deg)  rotate(3deg);
			-moz-transform: skew(8deg)  rotate(3deg);
			-ms-transform: skew(8deg)  rotate(3deg);
			-o-transform: skew(8deg)  rotate(3deg);
	}
HTML
	<div class="box effect7">
		<h3>Effect 7</h3>
	</div>

エフェクト6の全体バージョンですね。

Effect 7

裏はこうなっていてボックスシャドウがはみ出そうな感じです。

Effect 8

Effect 8

CSS
	.effect8 {
	    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	    position: relative;
	}
	.effect8:before, .effect8:after {
	    border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
	    bottom: 10px;
	    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	    content: "";
	    left: 0;
	    position: absolute;
	    right: 0;
	    top: 10px;
	    z-index: -1;
	}
	.effect8:after {
	    left: auto;
	    right: 10px;
	    transform: skew(8deg) rotate(3deg);
			-webkit-transform: skew(8deg)  rotate(3deg);
			-moz-transform: skew(8deg)  rotate(3deg);
			-ms-transform: skew(8deg)  rotate(3deg);
			-o-transform: skew(8deg)  rotate(3deg);
	}
HTML
	<div class="box effect8">
		<h3>Effect 8</h3>
	</div>

エフェクト７の横バージョン。

この丸みがかかっている感じ、好きです。

Effect 8

もう、見えちゃってるのかって位ボックスシャドウが押し迫っていますね。

目次に戻る

まとめ

いかがでしたか?

こんな凄く綺麗なエフェクトも実は簡単なんですよという事を

お伝えしたく記事を書いてみました。

目次に戻る

前の投稿へ
次の投稿へ
webサービス