CSS box-shadowの基本と設定項目
CSSでbox-shadowのプロパティを活用することで、要素に影をつけたり、浮き出しているように見せたりと、視覚的に楽しい表現を実現できます。
コード自体は下記のようにシンプルなのですが、シンプルな分、どの項目が何をあらわしているのかわかりにくいのが難点。
box-shadow: 10px 10px 20px 0px rgba(0,0,0, 1);
これらは左から順に、下記の5項目を表現しています。
- 水平オフセット
- 垂直オフセット
- ぼかし距離
- 広がり距離
- 色と透過度
ページ上部のジェネレーターも触りながらだと理解しやすいと思いますので、色々と触りつつ以下の解説をご覧ください。
水平オフセット
最初の値は、影の水平方向（横方向）のずれを指定します。プラスの値を指定すると影は右側に、マイナスの値を指定すると左側にずれます。
例: 10px → 右に10pxずれる影
例: -10px → 左に10pxずれる影
垂直オフセット
2番目の値は影の垂直方向（縦方向）のずれを示します。プラスの値で下方向、マイナスの値で上方向に影が移動します。
例: 10px → 下に10pxずれる影
例: -10px → 上に10pxずれる影
ぼかし距離
3番目の値は影のぼかしの強さを表します。値が大きいほど影が広くなり、柔らかくなります。逆に0にするとシャープな影になります。
例: 20px → 滲んだ影
例: 0px → シャープな境界の影
広がり距離
4番目の値は影のサイズの広がりを決定します。プラスの値で影が拡大し、マイナスの値で縮小します。
例: 10px → 全体的に影が広がる
例: -5px → 内側に引き締まるような影
色と透過度
最後に影の色を指定します。rgba()形式を使うことで、影の色に透過度（アルファ値）を追加できます。透過度の値は0（完全透明）〜1（不透明）です。
例: rgba(0,0,0,0.3) → 黒の30%不透明な影
box-shadowに関するQ&A
Q. 距離の単位にはpx以外のremやvwも使える？
使えますが、一部うまく反映できない単位があります。
| 単位 | 可否 |
|---|---|
| px | よく使う |
| rem | 使いやすい |
| em | 使える |
| % | 変になる |
| vw/vh | 変になる |
%やvwは明確に使用不可になっているわけではないのですが、設定するとだいたいおかしくなります。
個人的には、固定値で表現できるpxかremが使いやすいかと思います。emは親要素のフォントサイズに左右されるため、Webサイト全体で統一しにくくなりがちです。
Q ぼかしはマイナスの値にできない？
できません。-5pxなどを設定しても動きますが、マイナスの値はブラウザが強制的に0pxとして扱います。