CHROMA

世の中の "当たり前" を確認する

box-shadow 使う時、影を出す方向を一方向に抑える

One direction Shadow | jsdoit

box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまうことになる。

.box-shadow {
  box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.6);
}

f:id:thleap:20130925171810p:plain

左右の影を消すために、4番目の指定(広がり値)をぼかしの値と同じだけ負の値で指定(縮小)してあげると消える。
この時、下方向の影の長さを負の値で指定した分だけ足さないと上と同じ影の長さにはならないっぽい。

.box-under-shadow {
  box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6);
}

f:id:thleap:20130925172443p:plain

参考

box-shadowの指定方法とアイデアの種