今回は、CSSのプロパティ、「text-shadow」をご紹介します。

まずは、サンプルページをご覧ください。

サンプルページ

どうでしょうか？
テキストにシャドウがついた状態で表示されましたか？
サンプル2のテキストにtext-shadowを設定しました。

このプロパティは、対応していないブラウザがあるんです。
使いどころに困るかもしれませんね・・・。

各ブラウザごとの表示は下記の通りとなります。
上から、
Firefox/3.0.10
safari3.2.3
Google Chrome2.0.172.31
opera9.64
と、なっています。

それでは、実装方法です。

■HTMLソース

<h2 class="type1">これはプロパティを使用したテキスト サンプル1</h2>
<h2 class="type2">これはプロパティを使用したテキスト サンプル2</h2>

■CSSソース

.type1 {
 color: #ffff00;
 font-size: 200%;
}
.type2 {
 color: #ffff00;
 font-size: 200%;
 text-shadow: #ffff00 5px 5px 20px;
}

text-shadow: #ffff00 5px 5px 20px

ここがシャドウを設定している箇所です。
それぞれの値の意味は下記の通りです。

text-shadow: [シャドウの色] [水平方向への距離（右方向への影の距離）] [垂直方向への距離（下方向への影の距離）] [シャドウの距離];

水平方向、垂直方向の距離はマイナスの値だと、それぞれ、左方向、上方向に影が設定されます。