[CSS3 を使ってみる：第十二回] テキストに影を付ける(text-shadow)

CSS3 では、text-shadow で文字に影を付けることができる。今まで Illustrator やら Photoshop やらで付けていた影もこうやって CSS で付けられるとなると本当に感慨深い。IE は早く CSS3 に対応してくれるか、滅びるかどっちかにしてほしい。

◆text-shadow のプロパティ

text-shadow: x 軸のズレ y 軸のズレ ぼかしの範囲 色;
※ x 軸・y 軸のズレとぼかしの範囲は px 単位で指定する。ズレの値は負の値も可能。

以下は div (id: textShadow) の中の「textShadow」という文字に、x 軸へ 2px、y 軸へ 5px、ぼかしを 10px、色を rgb(50, 50, 50) で影を設定した場合。

#textShadow {
  text-shadow: 2px 5px 10px rgb(50, 50, 50);
}

すると、影ができる。


次に、x 軸のズレを 0px、y 軸のズレを 30px、ぼかしも 0px で無しにし、色は rgb(0, 102, 255) にして影を付けてみる。すると、テキスト自体は 1 つしか書いていないのに、ぼかしを指定しない影なので、2 つのテキストに見える。

#textShadow {
  text-shadow: 0px 30px 0px rgb(0, 102, 255);
}

さらに、text-shadow を重ねがけしてみる。以下は x 軸・y 軸共にズレが 0px、ぼかしが 2px、色が rgb(255, 255, 0) と、x 軸・y 軸共にズレが 2px、ぼかしが 7px、色が rgb(0, 0, 0) と、x 軸・y 軸共にズレが -2px、ぼかしが 7px、色が rgb(0, 0, 0) の影を付けてみる。

#textShadow {
  text-shadow: 0px 0px 2px rgb(255, 255, 0), 2px 2px 7px rgb(0, 0, 0), -2px -2px 7px rgb(0, 0, 0);
}

ちなみに、重ねがけの際は、先（左）に書いた影の方が上に来るので、うまくいかないときは順番を変えてみると狙った感じになるかもしれない。


背景を黒くすれば、これを使ってグローのような効果を出すこともできる。これは青白く光る雰囲気。

#textShadow {
  text-shadow: 1px 1px 5px rgb(0, 102, 255), 2px 2px 10px rgb(255, 255, 255), -2px -2px 10px rgb(255, 255, 255);
}

最後に、この影の色を rgba で付けてみる。判りやすいように、最初に付けた影の色を 50% にしてみる。

#textShadow {
  text-shadow: 2px 5px 10px rgba(50, 50, 50, .5);
}

すると、先ほどの影よりも薄い影ができる。


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

正常に動作しなかった環境：
Opera 10.53（重ねがけをした場合おかしな表示になる。単発の影なら問題はない）

W3C：
CSS Text Level 3