|
|---|
box-shadow プロパティは、CSS3の「Background and Borders Module Level3」で定義されているプロパティだ。ボックスに対して1つもしくは複数のシャドウを適用できる。今回のCSS3道場では、box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。
box-shadow の記述方法
box-shadowプロパティの値は、距離＋色で構成される。基本的な記述方法は以下のとおりだ。
| 値 | 省略 | 意味 |
|---|---|---|
| inset | 可 | ボックスの内側に影を指定する。省略時は外側に影が付く。通常は週略する |
| Xオフセット | 不可 | 水平方向への影の指定をする。正の値で右方向へ、負の値で左方向へ影を付ける |
| Yオフセット | 不可 | 垂直方向への影の指定をする。正の値で下方向へ、負の値で上方向へ影を付ける |
| ぼやけ具合 | 可 | 影のぼやけ具合を指定する。大きい値を指定するとぼやけ具合は大きくなる。負の値は指定できない |
| シャドウの広がり | 可 | 影の広がり具合を指定できる。正の値を指定すると影が広がり、負の値を指定すると影が縮まる |
| 色 | 可 | キーワード、16進法（HEX）、RGBa、HSLaのいずれかで指定できる |
XオフセットとYオフセットは必須項目で省略不可、そのほかの値はオプションで省略できる。ただし、WebKit系ブラウザー（Google Chrome, Safari）は色の指定を省略すると影の色が透明になり、期待した効果が得られない。基本的には、「Xオフセット」「Yオフセット」「色」の3つの値はセットで指定する癖をつけよう。
今回のお手本
|
|
|---|
| 今回のお手本。画像を一切使用せずにCSS3だけでデザインできる（Mac OS X 10.6/Safari 5.0で表示） |
-->
box-shadow のブラウザー対応状況
box-shadowプロパティは2011年2月現在、以下のブラウザーで利用できる。
| ブラウザー名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| バージョン | 9+ | 3.5+ | 1.0+ | 10.5+ | 3.0+ |
| プリフィックス | なし |
-moz- 4.0+からプリフィックスなし |
-webkit- 10.0+からプリフィックスなし |
なし | -webkit- |
※IE8以下はfilterプロパティにて代用できる
IE9ベータ版／Opera10.5はベンダープリフィックスが不要で、Firefox, Chrome, Safariはベンダープリフィックスが必要だ（Chrome 10.0、Firefox 4.0以上はベンダープリフィクスが不要）。それぞれのブラウザーに対応した書き方でdiv要素の右下にシンプルな影を付けると、以下のようになる。
div{ -webkit-box-shadow : 5px 6px 7px rgba(0,0,0,.5); /*Chrome, Safari3.0+*/ -moz-box-shadow : 5px 6px 7px rgba(0,0,0,.5); /*Firefox3.5+*/ box-shadow : 5px 6px 7px rgba(0,0,0,.5); /*Opera10.5+, IE9b+*/ }
