CSS ボックスシャドウジェネレーター

box-shadow プロパティの構造

1つの box-shadow は、決まった順序で並んだ値のリストです。水平オフセット、垂直オフセット、ぼかし半径、広がり半径、そして色で、任意で inset キーワードが付きます。必須なのは2つのオフセットと色だけで、ぼかしと広がりは既定でゼロになります。つまり 0px 4px 12px rgba(0, 0, 0, 0.15) という記述は、水平方向の移動なし、下に4ピクセル、ぼかし12ピクセル、広がりなし、15パーセントの黒、という意味です。このツールのスライダーはまさにこの文字列を自動で書いてくれますが、順序を理解しておけば手作業での編集も苦になりません。

オフセットは、影をボックスに対して配置します。垂直オフセットが正の値だと影は下に移動し、これは要素の上方に光源があるというよくある錯覚を作りたいときに役立ちます。負の値だと影は上に持ち上がります。水平オフセットも左右で同じように働きます。オフセットは、要素がどれだけ高く浮いて見えるかを脳が判断するうえで最大の手がかりになるので、何よりもまず手を伸ばすべき値です。

ぼかしと広がり：混同されがちな2つの半径

ぼかし半径は、縁のやわらかさを制御します。ゼロのときはボックスのくっきりした複製になり、ぼかしが大きくなるにつれて影はより広い帯にわたって薄れていき、現実の拡散光のように見えてきます。最も自然な影の多くは、垂直オフセットのおよそ2〜3倍のぼかしを使います。なお、ぼかしを負の値にすることはできません。

広がりは、ほとんど誰も設定しない値ですが、強力です。正の広がりは、ぼかしが適用される前に影をあらゆる方向へ外側に膨らませ、ボックスより大きくします。負の広がりは逆に縮めます。ごくわずかな負の広がりを、下向きのオフセットとたっぷりのぼかしと組み合わせるのが、影が横から漏れ出さずにカードの真下にぴったり寄り添う、定番のレシピです。広がりは、塗りつぶしのリングを描く方法でもあります。オフセットをゼロ、ぼかしをゼロ、正の広がりを数ピクセル、そして単色にすればよいのです。

押し込まれた面・へこんだ面のための inset シャドウ

inset キーワードを加えると、影は要素の後ろではなく内側に描かれるため、表面が彫り込まれたように見えます。これは、入力欄を井戸のように見せたり、トグルを押し込まれたように見せたり、パネルをページにはめ込まれたように見せたりする方法です。オフセットは今や、影を受け止める内側の縁のほうを向くので、下向きのオフセットは上の内縁を暗くし、上から光が差し込む様子を模します。このツールの Inset オプションを切り替えて、外側の影と内側の影を行き来し、同じ数値がその意味を逆転させる様子を確かめてみてください。

複数の影を重ねる

box-shadow プロパティはカンマ区切りのリストを受け付け、ブラウザは最初のものを一番上にして、各影を順番に描画します。これは、リアルな奥行きを出すための最も役立つ技です。現実の物体は1つの影しか落とさないわけではなく、縁のすぐ下にきつく濃い接触影を、そしてその外側に広くて淡い環境影を落とします。低ぼかしの小さな影を、高ぼかしの大きな影の上に重ねればこれを再現でき、その結果はどんな単一の影よりもはるかに本物らしく見えます。

重ね合わせは、デザインシステムが高さのスケールを構築する方法でもあります。マテリアル風の高さは通常、ともに調整された2〜3枚の積み重なった影でできており、カードを1段階上げるときは1つの数値をいじるのではなく、スタック全体を入れ替えます。同じ宣言の中で inset シャドウと外向きの影を混ぜて、光の当たった縁と落ちる影を同時に出すこともできます。

実例：やわらかなカードの影

ほぼどんな明るい面でも見栄えのするレシピを紹介します。まず影が中央に保たれるよう水平オフセットはなし、垂直オフセットは8pxほど、ぼかしはおよそ24px、そしてカードの下に収まるよう広がりは−6px前後にします。色はほぼ黒にしつつ、不透明度は12パーセントほどに落とし、rgba(0, 0, 0, 0.12) と表します。負の広がりはやわらかな縁が角からはみ出すのを防ぎ、低い不透明度は影が汚れのように見えるのを止め、ほどよいオフセットは穏やかな頭上の光を示唆します。さらにくっきりさせたいなら、1pxのオフセット、ほぼゼロのぼかし、6パーセントほどの黒で2枚目の影を重ねて、鋭い接触線を演出しましょう。

よくある失敗とその避け方

最も多い誤りは、ぼかしを強くかけた完全に不透明な真っ黒の影で、これは光ではなく濁った不自然なものに見えます。色付きの背景はこれを悪化させます。彩度の高い青の上の黒い影は薄汚れて見えるので、代わりに影を背景の色相のほうへ寄せて色付けしましょう。もう1つの誤りは、広がりを2つ目のぼかし調整として扱うことです。それは違います。広がりをゼロのままぼかしだけを上げることが、一部の影がぼやけているのに小さすぎると感じる原因です。

box-shadow と drop-shadow フィルターを混同する人もいます。box-shadow は常に、border-radius を含む要素の矩形のボックスに従うため、ボックス内の透明な PNG であっても矩形の影が付きます。filter の drop-shadow は実際の透明でないピクセルをなぞるので、不規則な形や切り抜き画像にはこちらが向いています。カード・ボタン・パネルには box-shadow を使い、輪郭が矩形でないときはフィルターに手を伸ばしましょう。

パフォーマンスと大きなぼかしの落とし穴

影はブラウザによって描画され、非常に大きなぼかし半径は実際にコストが高く、とりわけ多くの要素で同時にアニメーションしたり表示されたりするときに顕著です。大きな影のぼかしや広がりをアニメーションさせると、フレームごとに再描画が発生し、低スペックの端末でカクつくことがあります。ホバー時に影を大きくしたい場合のよりなめらかな方法は、大きい影を擬似要素にあらかじめ描いておき、代わりにその不透明度をアニメーションさせることです。不透明度は合成が軽いからです。ぼかしの値を妥当な範囲に保ち、画面上に何百もの影付きノードを同時に置くのを避ければ、インターフェイスはなめらかなままです。