CSS:: text-shadowで可読性を向上させる

CSSだけでテキストにシャドーをかける方法はCSS2のときからありましたが、CSS3からtext-shadowプロパティのみで同じことができます。

単純なシャドーだけでなく、縁取りも可能となりました。

これで使うことで可読性が上がりますので、開発側としては助かりますね。

ただ、CSS3に対応していないブラウザ対策も考えないといけないのがつらいかな・・・

★記述方法

　セレクタ { 
  　text-shadow：　ぼかし色　X方向への距離　Y方向への距離　ぼかしの距離
　}

★単純なシャドー

　h1{
　　text-shadow: #CCCCCC 1px 2px 1px;
　}

★縁取り

　h1{
　　color: #fff;
　　text-shadow: #000000 0px -1px, #000000 1px 0px, #000000 0px 1px, #000000 -1px 0px;
　}