CSS おれおれ Advent Calendar 2012 – 03日目

text-shadowでテキストに影を付ける事ができます。

text-shadow: <x> <y> <blur> <color>;

<x>, <y>は影の座標、<blur>はぼやけで、それぞれpxなんかで指定します。

また影をカンマ,で区切って複数指定する事ができるので、ぼかしなしの影で囲ってやると、白抜きにしたり縁取りしたり出来ます。

割とよく使えるんじゃないかなーって思います。

実例

手前味噌ではありますが、過去に作ったサービスのロゴのところ、この方法でスタイルしてます。

注意点

複数指定できるんですが、継承は全体でひとつです。

つまり白抜き文字でスタイルされている要素にクラスを追加して影付きにした場合、白抜きで使用していた元の影は消えてしまいます。

当たり前といえば当たり前なのですが、ついついやってしまいがちなので、気を付けましょう。

下が切れる問題

ちなみにGoogle Chromeで”g”などの下の部分がうまく影が付かないようです。

真下（x 0px, y 1px）の指定を先頭に付けると、うまく行く場合があるみたい。うーん、なんだろう。他にも影の指定数があまり多いと駄目だったりします。

IE

古いIEは案の定サポートしていないのですが、独自プロパティfilterでDropShadowを使って再現する事ができます。

IEって、何だかんだで先進的だったんですよ。

参考