【HTML CSS 独学9】 基礎を固めて高く積み上げ！　「box-shadow」を整理しよう！ 　投資家のFIREへの旅路 第255回

要素に影をつけるCSSのbox-shadowを振り返ります。
地味なエフェクトですが、
あるのとないのとでは、やっぱり違うものです。

数字がずらっと並ぶコードになるので、
毎回、何が何かわからなくなるのです。

私の記憶力はもう限界のようです。

【box-shadow】

.box {
  box-shadow: 4px 4px;
}

基本的な書き方はこうなります。

1つめの数字で、左右方向の影を指定します。
整数の場合は右に影ができます。
負数の場合は左に影ができます。

2つめの数字で、上下方向の影を指定します。
整数の場合は下に影ができます。
負数の場合は上に影ができます。

【影をぼやかす】

.box {
  box-shadow: 4px 4px ５px;
}

影をぼんやりとさせたい時には、３つ目の値に、数字を入れましょう！
この場合は、5px分、影がぼやけます。
この度合いは、数字を入れてみて、テストしながら、ちょうどいいところを探るのがいいですね。

【影の広さを指定】

.box {
  box-shadow: 4px 4px 5px 10px #fff;
}

それぞれの方向の影がどのくらい広がるのかを指定できます。
４つ目の数字を入力するだけです！
これも簡単！
度合いは試しながら探りましょう。

【影に色をつける】

.box {
  box-shadow: 4px 4px 5px 10px #fff;
}

影の色を指定する場合は、色コードを書くだけでオッケーです！
簡単ですね！！

【まとめ】

数字がずらっと並ぶコードになるので、どれがどれを指定しているのかわからなくなりますので、
ここで、まとめておきます！

１番目の値＝左右
２番目の値＝上下
３番目の値＝ぼやけ度合い
４番目の値＝広がり度合い
５番目の値＝色

あれ？
どうやったっけ？？

そんな時は、またみにきてね♪