シュウ

今回は【CSS】box-shadowの使い方、影のエフェクトについて解説!
の解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• CSSについて学びたい方へ
• 今回はbox-shadow(エフェクト)について解説しております。

box-shadowとは、要素に影を指定する際に使用します。
基本的は使い方の解説は下記の記事を参考にしてください。

box-shadowの基本的は使い方

【CSS】box-shadowで指定方法

水平方向、垂直方向、ぼかしなどについて解説しております。

Chrome	Safari	Firefox	IE	Edge

box-shadowについて

box-shadowとは、要素に影を指定する際に使用します。基本的な値、記述方法は抑えて置きましょう。
書き方は以下のようになります。

要素 {box-shadow: 水平方向 垂直方向 影のぼかし 影の広さ 色 内側指定};

指定する項目が多いですが、とても簡単ですので、最後まで読んで実際に試してください。

ポイント！
box-shadowで指定する際には必ず半角スペースで区切りを入れて指定しましょう！
また、水平方向と垂直方向以外は省略しても問題ありません。

エフェクトについて

今回は、よく使うエフェクト(影)について解説、ご紹介していきます。
基本的な共通部分は下記を参考にしてください。
書き方は以下のようになります。

<ul class="box-effect">
 <li>box01</li>
 <li>box02</li>
 <li>box03</li>
 <li>box04</li>
</ul>

<ul class="img-effect">
 	<li><img src="" alt="画像パス" alt="" /></li>
 	<li><img src="" alt="画像パス" alt="" /></li>
</ul>

/*--ボックスに対してエフェクト--*/
ul.box-effect {
	display: flex; /*--横並びを指定--*/
	justify-content: space-between; /*--liの配置を指定--*/
	flex-wrap: wrap; /*--liの折り返しを指定--*/
}

ul.box-effect li {
	font-size: 1rem;
	font-weight: bold;
	flex: 0 0 120px; /*--liの幅--*/
	border-radius: 10px;
	padding: 1em;
	margin: .5em;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: #fff;
}

/*--ボックスに対してエフェクト--*/
ul.img-effect {
	display: flex; /*--横並びを指定--*/
	justify-content: space-between; /*--liの配置を指定--*/
	flex-wrap: wrap; /*--liの折り返しを指定--*/
}

ul.img-effect li {
	flex: 0 0 340px;
}

シンプルなぼかし

シンプルなぼかしを指定しています。
10px 10px 3pxは、水平方向 垂直方向 影のぼかしになります。
rgba(222 225 230 / 80%)は、グレー色の透明度を80%になります。

/*--エフェクト01--*/
ul.box-effect li,
ul.img-effect li img {box-shadow: 10px 10px 3px rgba(222 225 230 / 80%);}

左下を強調させるぼかし

2px 2px 3pxは、水平方向 垂直方向 影のぼかしになります。上記より数値を小さくしています。
rgba(0 0 0 / 40%)は、黒色の透明度を40%になります。黒色を指定することで影を強調させています。

/*--エフェクト02--*/
ul.box-effect li,
ul.img-effect li img {box-shadow: 2px 2px 3px rgba(0 0 0 / 40%);}

全体をぼかし

0px 3px 15pxは、垂直方向 影のぼかしになります。
垂直方向のみ指定をし、ぼかしの数値を大きくしています。
rgba(130 130 130 / 90%)は、黒色に近い色のグレー色の透明度を90%になります。

/*--エフェクト03--*/
ul.box-effect li,
ul.img-effect li img {box-shadow: 0px 3px 15px rgb(130 130 130 / 90%);}

box-shadowを指定したボタンデザイン

【CSS】box-shadowでボタンに影をつけてみよう！

ボタンに対して影をつけることで、より立体的にボタンをレイアウトできます。

まとめ

今回はこれで以上です。
水平方向、垂直方向やぼかしの値を変更しただけでもイメージは変わります。
今回のエフェクトを参考にしてみてください。

Chrome	Safari	Firefox	IE	Edge

最新記事

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

• 

  【CSS】斜めの背景について、transformを使ってみよう!

  2022.06.10

• 

  【CSS】text-shadowの使い方、縁取りを実装してみよう!!

  2022.06.03

• 

  【CSS】outlineの使い方、outline-offset(間隔)を学ぼう!

  2021.08.10

関連記事

< 前の記事

【CSS】背景色を２色(分割)指定する方法について!

次の記事 >

【CSS】要素の中央に縦線を引く方法、疑似要素で指定しよう!!