影文字／袋文字

フォントに影を落とすスタイル。
影の方向とぼかしの度合い、色を設定できる。複数指定可能。

設定によっては袋文字も再現できる。
また、 -webkit-text-stroke というスタイルによって鮮明な袋文字を描画できるが、非標準である。

画像にするまでもないが強調はしたいテキストに使うと良いスタイル。
凝り過ぎると安っぽい印象になるので注意。

デモ

注意

• -webkit-text-stroke はフォントの内側に描画される。
• 重い。特に iPhone 4 系では注意が必要。
• 閲覧端末が当スタイルに対応していようといまいと、文字色と背景色を同じ色にするのは好ましくない。

応用例

See the Pen Complex Text Shadow Examples by Chris Coyier (@chriscoyier) on CodePen.