テキスト(文字)に影をつける

テキスト(文字)に影(ドロップシャドウ)をつけるにはtext-shadowプロパティを使用します。

[書式] text-shadow: 横方向のずれ 縦方向のずれ ぼかし量 色;

横方向のずれはプラス値が右へ、マイナス値が左へずれます。
縦方向のずれはプラス値が下へ、マイナス値が上へずれます。

縦横のずれの大きさを変更した例

まずは、ぼかし量0の状態で縦横のずれの大きさを1px~5pxまで変更した例です。

[HTML]

[CSS]

[ブラウザ表示]

サンプル1

サンプル2

サンプル3

サンプル4

サンプル5

好み次第ですが、この文字の大きさではサンプル3あたりまでのずれにしたほうが良いでしょうね。サンプル4以上ですと「プ」のずれが少し大きく目立ってるかなと思います。

ぼかし量を変更した例

縦横のずれはサンプル3をベースとして今度はぼかし量を1px~5pxまで変えてみた例です。

[HTML]

[CSS]

[ブラウザ表示]

サンプル3 ぼかし1

サンプル3 ぼかし2

サンプル3 ぼかし3

サンプル3 ぼかし4

サンプル3 ぼかし5

ぼかし量も好みによりますね。個人的に影っぽくみえるのはぼかし3以上かなぁ。

応用例

text-shadowの値は「,」で区切ることで複数定義できます。重ねるイメージですね。

下記、例ではtext-shadowを上下左右に3pxずらしてぼかしを6px、色に透明度を入れて薄く文字全体を囲むようにしてみました。4枚重ねているイメージになります。

[HTML]

[CSS]

[ブラウザ表示]

サンプル3 ぼかし5

斜め方向も試してみましたが、ぼかしを入れないと周囲の影が角ばった感じになり美しくないです。斜め方向を追加してもキレイに囲めませんでしたので上下左右のみとしました。文字にハッキリしたフチをつけたい場合はやはり画像を使用ってことになりますね。