|
|---|
text-shadowプロパティはテキストとtext-decorationに対して影を1つもしくは複数つけられるプロパティだ。もともとはCSS2で定義されたものの、ブラウザーの実装が進まなかったためCSS 2.1でいったん削除され、CSS3のtext-moduleとして復活した。
text-shadowはCSS3の中でもっとも基本的なプロパティの1つと考えられているが、アイデア次第で大きな効果を得られるプロパティでもある。今回のCSS3道場は、text-shadowを使ってリッチな「見出し」をデザインしてみよう。なお、text-shadowはほとんどのモダンブラウザーに実装されているが、残念ながらInternet Explorer 9 ベータ版ではサポートされていない。
今回のお手本
|
|
|---|
| 今回のお手本。画像を一切使用せずにCSS3だけでデザインできる（Mac OS X 10.6/Safari 5.0で表示） |
-->
text-shadowプロパティの基本の記述
サンプルを紹介する前にtext-shadowプロパティの基本的な記述方法を確認しておこう。
text-shadowプロパティの値は、右方向へのズレ（距離）／下方向へのズレ（距離）／ぼやけ具合／影の色の順に記述する。影の色は#を使った16進数法（#HEX）／RGB(a)／ HSL(a) のいずれかの方法で指定する。
| IE | Firefox | Safari | Opera | Chrome |
|---|---|---|---|---|
| ― | 3.5+ | 1+ | 9+ | 1+ |
