• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2020/01/06
書いた人:
rurippa!
カテゴリ:
CSS
タグ
288 views

紙がめくれたり、少し浮いたように見える影(シャドウ)の表現をCSSで実装します。 CSS3のbox-shadowを使います。

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;の場合

まとめ

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


この記事を読んだ人はこんな記事も読んでいます