CSSのボックスシャドウを調整する

やりたいこと

平坦なカードに立体感を出したい、モーダルに柔らかい影を付けたい。スタイルシートで値を当てずっぱうにする代わりに、スライダーで形を決めて宣言をコピーします。

各値の働き

ずれX/Yは箱に対する影の位置で、Yをプラスにすると下に落ちて「浮いた」印象になります。ぼかしは輪郭をなだらかにし、0なら箱と同じ形の硬い影です。広がりはぼかす前に影を全方向へ膨らませるので、大きなぼかしでも影が見えるよう保ちます。

色は純粋な黒より、ページの文字色を薄めた色や暖みのグレーの方が自然です。不透明度と組み合わせてください。

insetと重ね合わせ

insetは箱の内側に影を描き、押し込んだ・窪んだ表現に使えます。この道具は1層の影を出します。実務では小さく硬い影と大きく柔らかい影をカンマで2層重ねることがよくあります。