box-shadowを使った影のつけ方（少し浮いて見える表現）

目次

• はじめに
• 解説
• まとめ

はじめに

紙がめくれたり、少し浮いたように見える影（シャドウ）の表現をbox-shadowを使って実装します。
解説もありますので、よければご覧ください。

完成はこちら

		<div class="sample01"></div>
		

		/*　白い四角 */
		.sample01{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		/* 左右の影 */
		.sample01::before,
		.sample01::after{
			content:"";
			position: absolute;
			z-index: -1;/*影を下の層に持っていく*/
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px #999;
		}

		/*　左側の影 */
		.sample01::before{
			left: 5px;
			transform:rotate(-3deg);
		}

		/*　右側の影 */
		.sample01::after{
			right: 5px;
			transform:rotate(3deg);
		}
		

解説

影の部分をどう作るの？ということなんですが、左下の影と 右下との影はそれぞれbeforeとafterで実装できます。

わかりやすくするために、右下の影（after）だけを表示して、z-indexを調整してみました。
あの白い四角の下には、transform:rotate(-3deg);で少し傾けた 影付きの四角があります。これを左右に配置することで実装しています。

＜右下の影だけ表示＞
afterがz-index: 1;の場合

afterがz-index: -1;の場合

まとめ

一見どうやって作るの？と思うものも、分解して１つずつ考えていくと、理解できることも多いと思います。今回のは、そういう中の１つかな？と思います。ソースコードみて頂いてもわかりやすいと思いますので、難しいと感じた方は見てみてくださいね。