[CSS3 を使ってみる：第一回] オブジェクトに影を付ける(box-shadow)

box-shadow では div などの要素に影を付けられる。

◆box-shadow のプロパティ

box-shadow: x 軸へのズレ y 軸へのズレ ぼかしの範囲 色;

id: boxShadow の div の x 軸へ 1、y 軸へ 2 ズレた位置へ、ぼかし 8px、色を rgb(100, 100, 100) で指定する場合はこんな感じ。

#boxShadow {
  box-shadow: 1px 2px 8px rgb(100, 100, 100); /* Opera で有効 */
 -webkit-box-shadow: 1px 2px 8px rgb(100, 100, 100); /* Safari、Chrome で有効 */
 -moz-box-shadow: 1px 2px 8px rgb(100, 100, 100); /* Firefox で有効 */
}

「box-shadow」単体が当然、正式な記述形式になるが、現在は Opera しか対応しておらず、先頭に「-webkit-」や「-moz-」を付けないと Safari や Chrome、Firefox では効果が反映されない。


ズレの部分は負の値にすることもできる。これは x 軸へ -5、y 軸へ -10 したもの。

#boxShadow {
  box-shadow: -5px -10px 8px rgb(100, 100, 100); /* Opera で有効 */
 -webkit-box-shadow: -5px -10px 8px rgb(100, 100, 100); /* Safari、Chrome で有効 */
 -moz-box-shadow: -5px -10px 8px rgb(100, 100, 100); /* Firefox で有効 */
}

また、色を変えれば黒バックに光る物体としても描画できる。以下は色を rgb(255, 255, 255) にして、ズレを x 軸 y 軸共に 0px にしたもの。

#boxShadow {
  box-shadow: 0px 0px 8px rgb(255, 255, 255); /* Opera で有効 */
 -webkit-box-shadow: 0px 0px 8px rgb(255, 255, 255); /* Safari、Chrome で有効 */
 -moz-box-shadow: 0px 0px 8px rgb(255, 255, 255); /* Firefox で有効 */
}

最後に、box-shadow ではカンマに続けての重ねがけができるので、黒バックに青白く光らせるには一例としてこのようにする。

#boxShadow {
 -webkit-box-shadow: 0px 0px 3px rgb(0, 102, 255), 0px 0px 10px rgb(255, 255, 255); /* Safari、Chrome で有効 */
}
※これは Firefox と Opera で効果が変になる。ぼかしとなる部分の上と左は白で、右と下は青で表示されてしまう。

確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C：
CSS Backgrounds and Borders Module Level 3