今回は【CSS】box-shadowの使い方、影のエフェクトについて解説!
の解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
CSS
について学びたい方へ - 今回はbox-shadow(エフェクト)について解説しております。
box-shadow
とは、要素に影を指定する際に使用します。
基本的は使い方の解説は下記の記事を参考にしてください。
box-shadowの基本的は使い方
水平方向、垂直方向、ぼかしなどについて解説しております。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
box-shadowについて
box-shadow
とは、要素に影を指定する際に使用します。基本的な値、記述方法は抑えて置きましょう。
書き方は以下のようになります。
要素 {box-shadow: 水平方向 垂直方向 影のぼかし 影の広さ 色 内側指定};
指定する項目が多いですが、とても簡単ですので、最後まで読んで実際に試してください。
- 指定できる値
- 水平方向 垂直方向
「4px」のように影の長さを数値と単位で指定できます。
「4px 5px」のように半角スペースで区切ると「水平方向 垂直方向」に指定ができます。マイナスの値も可能
- 影のぼかし
「5px」のように数値と単位で影のぼかしを指定できます。
数値の値が大きいほど影のぼかしが強くなります。マイナスの値も可能
- 影の広さ
「5px」のように数値と単位で影の広さを指定できます。
数値の値が大きいほど影が全方向に大きくなります。マイナスの値も可能
- 色
キーワード、またはカラーコードでの指定ができます。
- 内側指定
最後に「inset」を指定すると、要素の内側に影が付くようになります。
ポイント!
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を指定したボタンデザイン
ボタンに対して影をつけることで、より立体的にボタンをレイアウトできます。
まとめ
今回はこれで以上です。
水平方向、垂直方向やぼかしの値を変更しただけでもイメージは変わります。
今回のエフェクトを参考にしてみてください。
- POINT
-
box-shadow
水平方向 垂直方向 影のぼかし 影の広さ 色 内側指定の順になります。 - 水平方向と垂直方向以外は省略しても問題ありません。
- 複数の影を指定したい際には「,」カンマで区切ることで複数の影を指定できます。
- 現在使用されているブラウザは問題なく表示します。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事