CSSのbox-shadowは位置、ぼかし、広がり、内側を順に指定する

公開日：2013年10月25日執筆：佐藤

CSSのbox-shadowは、要素の箱へ一つ以上の影を描くプロパティです。長さを左から、横方向の位置、縦方向の位置、ぼかし半径、広がり距離の順に読みます。最初の二つは必須で、ぼかしと広がりは省略できます。

ぼかし半径は影の境界をぼかし、広がり距離はぼかす前の影の形を外側または内側へ広げます。この二つを同じ「影の大きさ」として調整すると、意図した輪郭になりません。

最初の二つの長さは横と縦の位置を決める

基本形は、横位置、縦位置、ぼかし、広がり、色です。

.card {
  box-shadow: 4px 6px 10px 0 rgba(0, 0, 0, 0.25);
}

この指定は説明用の仮例です。影を右へ4px、下へ6pxずらし、ぼかし半径を10px、広がり距離を0にします。

横位置が正なら右、負なら左へずれます。縦位置が正なら下、負なら上へずれます。たとえば-4px 0なら左へ4pxずれ、上下にはずれません。

.left-shadow {
  box-shadow: -4px 0 #777;
}

長さを二つだけ書いた場合、三つ目を広がり距離として読むことはできません。三つ目は常にぼかし半径です。広がりを指定したい場合は、ぼかしが不要でも三つ目へ0を書きます。

W3CのCSS Backgrounds and Borders Module Level 3では、三つ目の長さをblur radius、四つ目をspread distanceとして定義しています。

.soft {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
}

.wide {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
}

.softは影の境界をぼかします。.wideはぼかさず、影の形を四方へ4px広げます。blur radiusには負の値を指定できません。spread distanceには負の値も使え、その場合は影の形が縮みます。

影を濃く見せたいときに、ぼかし、広がり、色の不透明度を同時に変えないでください。まず位置を決め、次にぼかし、広がり、色の順で一つずつ比較します。

insetを加えると、外側の影ではなく、箱の内側へ影を描きます。

.field {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

外側の影は、要素が面の上へ浮いているような輪郭を作ります。内側の影は、要素の内側がくぼんでいるような輪郭を作ります。insetの有無は位置の違いではなく、影を描く側の違いです。

内側の影はpadding edgeの内側へ描かれ、外側の影はborder edgeの外側へ描かれます。入力欄の境界を示すために使う場合も、影だけに頼らず、borderや背景色との組み合わせを確認します。

一つの要素へ複数の影を付ける場合は、影ごとの指定をカンマで区切ります。

.panel {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

先に書いた影が上に描かれ、後の影はその下へ重なります。二つの影を一度に調整せず、一つ目だけで位置と濃さを確認してから二つ目を加えます。

border-radiusが0ではない場合、影の形も角の丸みに従います。角丸と影を別々の四角形として作る必要はありません。ただし、blurとspreadを大きくすると周囲の要素へ重なりやすくなるため、狭い画面でも確認します。

box-shadowは、要素が占めるレイアウト上の幅や高さを増やしません。外側へ影が見えても、隣の要素を押し退ける余白にはなりません。影はほかの箱や影へ重なる場合があります。

そのため、影が切れたり隣の部品へ重なったりするときに、要素のwidthやheightだけを変えても原因が分からないことがあります。親要素のoverflow、要素間のmargin、影の位置、blur、spreadを分けて確認します。

影はスクロール領域を広げるための指定でもありません。影を含む見た目の間隔が必要なら、レイアウトの余白はmarginやpaddingで別に確保します。

box-shadowを解釈しない環境では、その宣言が表示へ反映されません。背景、border、文字色など、内容を読んで操作するための基本表示を先に作り、影は補助として加えます。

特に、入力欄のフォーカスやボタンの状態を影だけで区別する場合は、キーボード操作で状態を確認します。影を一時的に外しても、入力欄の境界、押せる部品、選択中の状態が分かるかを見ます。

制作を委託する場合は、影の完成画像だけでなく、横位置、縦位置、blur radius、spread distance、色、inset、複数影の順序をCSS値として受け取ります。画像の印象ではなく、どの値がどの役割を持つかを引き継げます。

最初の一手は、対象の影を一つだけにし、四つの長さへ「横」「縦」「ぼかし」「広がり」と注釈を付けることです。

Logo

戻る