21. ボックスや画像に影を付けてみよう box-shadow

目次

box-shadowでボックスや画像に影を付ける

box-shadowプロパティは、文字通りボックスや画像に影を付けるプロパティです。

値はpxで指定でき、値をスペースで区切って2つ指定すると、1つ目の値は横方向に影をどれだけ出すかに対応し、2つ目の値は縦方向に対応します。


このように、右と下に10pxずつ影が出ているのが分かります。

↓1つ目の値をマイナスにすれば左に、2つ目の値をマイナスにすれば上に影が出てきます。


また、どちらか一方にだけ影を出したい場合は、もう片方の値を0にすればOKです。

影をぼかす

3つ目の値を指定すると、その値は影のぼかし具合に対応します。3つ目の値もpxで指定でき、値が大きいほどぼかし具合が大きくなり、0にすればぼかしはなくなり、境界線がくっきりと表示されます。




上の2つの例では、値が大きいほど影がぼやけて周りに広がっているのが分かります。

影の大きさを変える

4つ目の値を指定すると、その値は影の大きさに対応します。この値もpxで指定し、プラスの値を指定すると影は拡大し、マイナスだと縮小します。4つ目の値は、3つ目までの値で作った影を、形を崩さずにそのまま拡大・縮小するイメージです。

↓影の大きさを指定しない


↓大きさを15pxに


↓大きさを-8pxに



影の色を変える

値に色を追加すれば、影の色を変えることができます。



影を内側に付ける

値にinsetを追加すれば、影を内側に付けることができます。



全方向に影を付ける

全方向に影を付けるには、1つ目、2つ目の値を0にして、3つ目か4つ目の値をプラスの値で指定すればOKです(ただし、4つ目の値だけだと影っぽくは見えなくなります)。


ボックスと影を完全に重ねて、その後に影をぼかしたり大きくしたりするイメージですね!