CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
Post on:2020年7月27日
sponsors
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。
少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
Saturated vs Desaturated Box-Shadow
HTMLは、シンプルです。
div要素にclassを与えるだけです。
|
1 2 |
<div class="card">古いCSS</div> <div class="card better">これからのCSS</div> |
まずは、box-shadowでシャドウをつける古い書き方。
box-shadowに3つの値（offset-x, offset-y, blur-radius）とcolorを定義します。offset-xとoffset-yはシャドウの距離、blur-radiusはシャドウのぼかしです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.card { box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%); background: hsl(0 0% 100%); color: hsl(200 50% 20%); line-height: 1.5; font-size: 1.5rem; font-weight: 300; width: 35vmin; height: 35vmin; display: flex; place-items: center; text-align: center; padding: 3ch; border-radius: 2ch; border: 1px solid hsl(0 0% 83%); } |
box-shadowでシャドウをつけるこれからの書き方。box-shadow以外は同じです。
box-shadowに4つの値（offset-x, offset-y, blur-radius, spread-radius）とcolorを定義します。spread-radiusは正値だと拡大、負値だと縮小され、ここではシャドウが縮小されています。
|
1 2 3 |
.better { box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%); } |
spread-radiusは、IE9を含む主要なすべてのブラウザでサポートされています。
参考: MDN
他の値は同じで、spread-radius無しと有りでは下記のように表示されます。
無しの状態のシャドウをぎゅっと縮小したのが有りの状態です。
左: spread-radius無し、右: spread-radius有り
実際の動作は、下記ページでご覧ください。
シャドウの彩度が高いので、矩形がくっきりしますね。パネルのカラー（ホワイト）も綺麗に見えます。
See the Pen
Saturated vs Desaturated Box-Shadow by Adam Argyle (@argyleink)
on CodePen.
sponsors
