0から目指すWebマスター Web制作に関する備忘録
検索

CSS

text-shadowを極める

text-shadowプロパティは、その名から想像するとおり、テキストに影をつける(ドロップシャドウ)ことができます。

仕様

text-shadow:右方向 下方向 ぼかし 色;

box-shadowでは「広がり」がありますが、text-shadowには「広がり」はありません(参考:box-shadowを極める)。

サンプル

text-shadow:3px 3px #fff;

testテキスト

text-shadow:3px 3px rgba(255,0,0,0.4);

testテキスト

text-shadow:3px 3px 3px rgba(255,0,0,0.4);

testテキスト

プログレッシブ・エンハンスメント

IE8以下では、text-shadowは適用されません。
とはいえ、シャドウがかからなくても情報は正しく伝わるため、プログレッシブ・エンハンスメントを適用しシャドウが適用されないブラウザは残念、ということでぼくはやり過ごすことにします。