【初級者向け】検証して学ぶbox-shadow　ーCSS解説シリーズ１ー

今回はCSSをなんとなくやったことあるよ！という方、
box-shadowのオプションってどれがなんだっけとなりがちな方向けに
box-shadowについて解説します。

box-shadowとは？

ブロック要素に影をつけるCSSプロパティです。
立体的なボタンを作りたいという場合に使用することが多いです。

「画像」

box-shadowプロパティの使い方

box-shadowは

box-shadow:左右の距離　上下の距離　ぼかし　拡散　色;

と数値を４つと色を指定します。

例としてdiv要素にbox-shadowを適用します。

html

↑の例ですと、わかりにくいので、横幅（width）と背景色(background-color)をつけてみます。

css

と、簡単に影をつけることができます。

box-shadowの数値をいじって検証してみる

それぞれ指定できる数値を使って遊んでみます。

左右方向の場合

１番目数値は左右方向です。
他の数値を0にして、1番目だけ数値を入れてみます。

右方向に指定した長さ分ずれます。
数値はマイナス指定もでき、左側にずれていきます。

上下方向の場合

2番目数値は上下方向です。
他の数値を0にして、2番目だけ数値を入れてみます。

ぼかしについて

3番目数値はどのくらいぼかすかで、
0以上の数字を指定する必要があります。
今回は1～3番目まで20pxを指定してみます。

拡散について

4番目の数値は影をどの程度広げるかを指定することができます。
注意点としては、上下左右に広がりますので、影が上からはみ出してしまうなんてことがありますので、
しっかり確認しましょう。
3番目のぼかしを0にして、4番目の拡散を20px指定してみます。

何度も繰り返してみる

繰り返し使って影を複数つけることもできます。
わかりやすいように色を変えて検証。

box-shadowを使って簡単に図形を書いてみる

簡単に入れ込むことができるbox-shadowを使用したテクニックを紹介します。

html

css

すると↓のように簡単にコーポレート系のサイトで入れこむことができる図形を描くことができます。

あとは入れ込みたいところへ、positionやpadding等で調整すれば応用が利きますので是非使ってみてください。

終わりに

box-shadowについて一つ一つ検証しながら進めてみました。
少しでもご参考にしていただけますと幸いです。

プロのデザイナーからテクニックを学びたいという方、まずは無料のカウンセリングでご相談ください。
もっと高度な技を学ぶこともできますよ！

<p align=”center”><a class=”btn-orange btn-3d” href=”https://akros-ac.jp/course/”>無料カウンセリングで相談する</a></p>