CSSだけで文字(テキスト)に陰を付けたい

長らくIEだけは独自仕様で実装されていた「影付き文字」ですが、IE10以降ではCSS標準の「text-shadowプロパティ」が扱えるようになりました。つまり、今では代表的なブラウザのすべてで「文字に陰を付ける方法」が統一されたことになります。
もっとも、まだ若干IE9以下の利用者も居るわけですが。しかし、徐々に減っていくでしょうから、そろそろIE独自のfilterプロパティは廃してCSS標準のtext-shadowプロパティだけを使うと良いのではないかと思います。

そんな「影付き文字」が簡単に作れるtext-shadowプロパティですが、だいたい以下のように記述して使います。

text-shadow: (右方向への移動距離) (下方向への移動距離) (ぼかす範囲) (文字色);

4つの値は、空白文字で区切って指定します。複数の影を付けたい場合は、カンマ記号で区切ります。(記述例は後述)

影を1つだけ作る場合のスタイルシートの書き方

まずは、文字に陰を1つだけ付ける場合のCSSソース記述例です。

text-shadow: 5px 7px 3px #ffaaaa;

上記は、右方向に5px・下方向に7pxずらした位置に、3pxの範囲でぼかした影を、#ffaaaa(淡い赤色)で表示します。
これを表示すると、以下のように見えます。(IEの場合は、IE10以降で見て下さい。)

タイトルなど、目立たせたい文字の表示に活用すると良いでしょうね。
強調したい箇所で使っても良いかも知れませんが、本文中で使ってしまうと若干うるさくなるかも知れません。(^_^;)

影を左上に作る場合の書き方

影の表示位置にはマイナスの値も使えるので、上方向や左方向に影を延ばすこともできます。

text-shadow: -7px -10px 5px #ffaaaa;

上記のように記述すると、影は「左方向に7px（＝右方向に-7px）」・「上方向に10px（＝下方向に-10px）」の位置に、5pxの範囲でぼかして、#ccaa80(淡い赤灰色)で表示されます。

影を2つ(複数)作る場合の書き方

1つの文字に対して、陰は1つしか指定できないわけではありません。複数の陰を加えることもできます。

text-shadow: 5px 7px 3px #80aa80, 12px 15px 5px #aaaacc;

上記は、『右方向に5px・下方向に7pxずらした位置に、3pxの範囲でぼかした影を、#80aa80(淡い緑色)』で表示し、さらに、『右方向に12px・下方向に15pxずらした位置に、5pxの範囲でぼかした影を、#aaaacc(淡い青色)』で表示します。

こんな感じで、簡単に複数の影がつきます。

陰を上下左右に4つ加えることで、文字を縁取りできる

陰を複数も付けてどうするのだ……と思われるかも知れませんが、この方法で4方向に同時に陰を加えると、文字を縁取りする効果が出ます。
文字を縁取りしようと思うと今までは文字を画像化するくらいしか方法がなかったわけですが、このtext-shadowプロパティを応用すれば、文字をテキストのままで(画像化することなく)縁取りできます。画像や複雑な模様の上に文字を書きたい場合に、読みやすさを確保する目的で便利に使えそうです。

その「陰を使って文字を縁取りする効果」を出す方法については、All Aboutで記事にしましたので、そちらをご参照下さい。^^;
→『文字に影を付け、画像に重ねた文字を見やすくするCSS3』

(更新日：2016年03月08日)