text-shadow で文字に影を落とすサンプル

text-shadowで文字に影を落とすサンプルです。

• FireFox3.5以降とsafariでのみ実装されている機能とのこと。IEでは動作しないのでご注意
• パラメータは「x座標、y座標、ぼかし具合、色」または、「色、x座標、y座標、ぼかし具合」の順で指定します。

/* 
 * 影を落とすためのCSS指定。
 * 「x座標、y座標、ぼかし具合、色」の順に設定する。
 * 以下は右斜め下1pxに、#111、ぼかし2pxの影を描画する例
 */
text-shadow: 1px 1px 2px #111;

実行結果はこちら

あと、「,」区切りで一連の設定を並べて書くことで、重ねがけもできます。以下は、重ねがけで虹色(といっても5色ですが)の影を書いてみた例です。

/* 
 * 「,」区切りで複数指定が可能。
 */
text-shadow: 1px 1px 3px #F00, 
                     2px 2px 3px #FF0, 
                     3px 3px 3px #0F0, 
                     4px 4px 3px #0FF, 
                     5px 5px 3px #00F;

実行結果はこちら