CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方

CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。
少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。

CSSで美しいシャドウをつけるbox-shadowの書き方

Saturated vs Desaturated Box-Shadow

HTMLは、シンプルです。
div要素にclassを与えるだけです。

まずは、box-shadowでシャドウをつける古い書き方。
box-shadowに3つの値(offset-x, offset-y, blur-radius)とcolorを定義します。offset-xとoffset-yはシャドウの距離、blur-radiusはシャドウのぼかしです。

box-shadowでシャドウをつけるこれからの書き方。box-shadow以外は同じです。
box-shadowに4つの値(offset-x, offset-y, blur-radius, spread-radius)とcolorを定義します。spread-radiusは正値だと拡大、負値だと縮小され、ここではシャドウが縮小されています。

spread-radiusは、IE9を含む主要なすべてのブラウザでサポートされています。
参考: MDN

他の値は同じで、spread-radius無しと有りでは下記のように表示されます。
無しの状態のシャドウをぎゅっと縮小したのが有りの状態です。

spread-radius無しと有り

左: spread-radius無し、右: spread-radius有り

実際の動作は、下記ページでご覧ください。
シャドウの彩度が高いので、矩形がくっきりしますね。パネルのカラー(ホワイト)も綺麗に見えます。

See the Pen
Saturated vs Desaturated Box-Shadow
by Adam Argyle (@argyleink)
on CodePen.

sponsors

top of page

©2020 coliss