要素が生成するボックスの周りにシャドウを設定する
Last update: 2008-08-29
box-shadow は CSS 3 で追加された要素が生成するボックスの周囲に影を生成するプロパティ。Firefox は Gecko 1.9.1 で実装され、Firefox 3.1 からサポートされる。ただし、現在 (08-29-2008) はプレフィクス付きの-moz-box-shadowで実現するようになっている。
これはCSS3 Backgrounds and Borders Moduleでの仕様が未確定ということから、このような処置となっているようだ。
じつは、このことを知らなかったので box-shadow を指定しても効果を確認することができず、Mac OS X でのバグかと思ってしまったorz
boxt-shadow は Webkit の Safari でも -webkit-box-shadow と記述することで実現している。
プロパティ
- none
- シャドウを生成しない
- 値 (単数)
- [長さ] [長さ] [長さ] [色]
- 値 (複数)
- 「[長さ] [長さ] [長さ] [色]」のセットを「,」区切りで複数の影を設定する
box-shadow の設定は左右の距離、上下の距離、ぼかし範囲、影の色をセットにして記述する。このうち、［長さ］の記述順は左から順に［左右の距離］［上下の距離］［ぼかし範囲］と記述する。この順番は決められている。［影の色］は先頭に持ってきても良いようだが仕様変更も考えられるので、Ｗ3C の内容に従って［左右の距離］［上下の距離］［ぼかし範囲］［影の色］と記述しておく方が良いかもしれない。
基本的な設定
CSS にはこのように記述する。
<div style="box-shadow: 0.15em 0.2em 0.3em #8fbc8b;">The Effect</div>
左右と上下の距離にはマイナス数値も記述できる。その場合、元の画像の位置を基準に［左右］では左、［上下］では上に影の位置が設定されたことになる。［ぼかし範囲］のマイナス値は当たり前だが無視されるようだ。
複数の影を設定する場合は、プロパティ値のセットをカンマ (,) で区切って記述する。ただし、影セットの順番は確定されていないようで、Firefox と Safari は左から順番に「上」から「下」へとレイヤーを重ねるようにレンダリングする。
Opera は box-shadow を実装こそしていないが、text-shadow では左から「下」から「上」と、反対に解釈しているので、たぶん box-shadow も同じ結果となるのではないだろうか。
レンダリングサンプル
ブロック要素
サンプルは２つの div 要素に box-shadow 設定、z-index で重なるように指定した。
box-shadow には -moz-box-shadow, -webkit-box-shadow, box-shadow を記述しているので、Safari でもおよそ同じようにレンダリングされるはずだ。
<div style=" -moz-box-shadow: 18px -14px 18px #808080; -webkit-box-shadow: 18px -14px 18px #808080; box-shadow: 18px -14px 18px #808080;">Content</div>
- MEMO
- 「光と影の魔術師」と呼ばるレンブラントの光と影を駆使した表現技法は、後世の画家に多大な影響を与えた。
- MEMO
- その技法は「レンブラント照明」「レンブラントライト」として知られる。
インライン要素
インライン要素に box-shadow を設定した場合もボックスが生成される。
<span style="margin: 0 0.4em; padding: 0 0.25em; -moz-box-shadow: 0.4em 0.2em 1em #808080; -webkit-box-shadow: 0.4em 0.2em 1em #808080; box-shadow: 0.4em 0.2em 1em #808080; font-weight: bold;">影</span>
「光と影の魔術師」と呼ばるレンブラントの光と影を駆使した表現技法は、後世の画家に多大な影響を与えた。
box-shadow を設定した要素の background-color に transparent を設定しても無視され、親要素の設定が使われるようだ。
「光と影の魔術師」と呼ばるレンブラントの光と影を駆使した表現技法は、後世の画家に多大な影響を与えた。
