Text Shadow.

前回、Box-shadowをやりましたので、今日は簡単にCSSにおける文字の影付けについて。

タグもその名の通り”text-shadow”です。そして、書き方もbox-shadowん時と一緒。

text-shadow: 1px 2px 10px #000;

みたいな感じで書きます。初めのパラメータが横方向、次が縦方向のズレ、10pxとなっているのがぼかし具合です。
最後に影の色を指定します。これもRGBA値で指定可能。その場合は

text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);

のように書いてください。基本的にIE以外のブラウザには対応しているようです。IEの場合はfilterのshadowを使ってあげます。

filter: progid:DXImageTransform.Microsoft.Shadow
(direction=45,strength=5,color=000000);

こんな感じ。

影のズレをマイナスにして、色を背景より少し濃い色にしてやると、型押し文字みたいな効果が作れます。私のサイトのコンタクトの文字みたいになります。
他にも、ぼかし方とか、重ねる色とかを調整するといろんな効果が出せるみたいなので、デザインの幅も広がると思います。