CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。

今回は，CSS3なのですがCSS2.1でもあったtext-shadowプロパティについてフォーカスします。

すでにプロパティの名前から何ができるかは予想がつきます。ただ，"そろそろ何ができるか"ではなく，"どのように使うか"という実践の部分に注目して紹介していきます。

text-shadowプロパティの記述方法

まずは，基本のtext-shadowプロパティの記述方法ですが，以下の形式で値を指定します。

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

ぼかし色

ぼかし色はRGB，色名にて指定が可能。#000はRGBの黒だが，blackでも指定することが可能。ぼかしの色は，text-shadowプロパティの値として一番最初に記述しても，一番最後に記述しても同じ結果になる。

X方向への距離

右へ陰の距離を指定する。プラスの値だと右方向へ，マイナスの値だと左方向へ陰が移動する。単位はpxでもemでも使用可能。

Y方向への距離

上下方向への陰の距離を指定する。プラスの値だと下方向へ，マイナスの値だと上方向へ陰が移動する。単位はpxでもemでも使用可能。

ぼかしの距離

値が大きくなれば，ぼかし具合が大きくなる。逆に値が小さいくなれば，ぼかし具合は小さくなる。単位はpxでもemでも使用可能。ぼかしの距離が未記述の場合，ぼかしは適用されない。

例えば，h1要素に対してtext-shadowプロパティを適用する場合，以下のように記述します。

h1{
font-size: 40px;
text-shadow: gray 1px 2px 1px;
}

h1{
margin: 40px;
}

text-shadowプロパティをサポートしたブラウザでは，次のように表示されます。

text-shadowプロパティは実践的な使い方／可読性の向上

一般的に，薄い水色の背景色上で白いテキストを使うと非常に見づらく，可読性をそこなってしまいます。しかし，text-shadowプロパティを適用するとグッと文字が見やすくなります。

つまり，text-shadowプロパティを使うことで，見やすい環境を簡単に作ることができます。

例えば，id属性"with-text-shadow"のp要素に対してtext-shadowプロパティを適用する場合，以下のように記述します。

html{
background-color: #BBfff6;
font-family: Verdana, sans-serif;
}

p{
margin: 40px;
font-size: 40px;
color: #fff;
}

p#with-text-shadow{
text-shadow: black 1px 1px 1px;
}

text-shadowプロパティをサポートしたブラウザでは，次のように表示されます。

text-shadowプロパティの実践の使い方／アウトライン

text-shadowプロパティを以下のように指定することで陰を複数つけることができるようになります。

h1{
color: #000;
font-size: 40px;
text-shadow: #green 6px 6px, #red -12px -12px, #yellow 15px 15px;
}

h1{
margin: 40px;
}

text-shadowプロパティをサポートしたブラウザでは，次のように表示されます。

これを利用すると文字にアウトライン（ふちどり）をかけたようなデザインを実現できるようになります。具体的には，陰を上下右左の4方向に設定するだけなので，とても簡単です。

h1{
color: #fff;
font-size: 40px;
text-shadow: #black 0px -1px, #black 1px 0px, #black 0px 1px, #black -1px 0px;
}

text-shadowプロパティをサポートしたブラウザでは，次のように表示されます。