[CSS]文字に影を付ける方法

今回はスタイルシートを使って文字に影を付ける方法をご紹介します。

HTMLで文字を表示する時、画像（ボタンなど）の文字にはドロップシャドウの効果が付いているので読みやすかったり、少しリッチな感じがしたりするのですが、テキストの部分はなんだかサッパリしすぎていて、バランスが取れていないことがあります。

そんな時はスタイルシートでテキストにドロップシャドウ効果を付けましょう。

フォーマット

フォーマットは以下のようになります。

text-shadow: ［横方向のオフセット］ ［縦方向のオフセット］ ［ぼかしの半径］ ［影の色］

どのようになるのか？

実際に試してみると、このように表示されます。

何も影をつけていない状態だとサッパリした雰囲気です。

text-shadow: 2px 1px 5px #aaa;

で設定してみると、文字に影ができて印象が変わります。

文字の影はサイトの雰囲気を変える重要な要素ですので、有効に利用することをオススメします。

本日は以上です。