text-shadowで影(ドロップシャドウ)を付ける方法と使用例【CSS】

今回は、テキストにtext-shadowプロパティで影(ドロップシャドウ)を付ける方法と、各使用例を紹介・解説していきます。
box-shadowプロパティについてはbox-shadowで影(ドロップシャドウ)を付ける方法と使用例【CSS】をご覧ください。

text-shadowプロパティの使い方

最初に、text-shadowプロパティの基本的な使い方を解説していきます。
使い方は簡単で、影(ドロップシャドウ)を付けたいセレクタに対して以下のように指定します。

text-shadow: 水平方向の位置(x軸) 垂直方向の位置(y軸) ぼかし半径(大きさ) 色;

上記の指定の中で、水平方向の位置(x軸)と垂直方向の位置(y軸)の指定は必須となります。カンマ区切りで複数の影を付ける事も可能です。
各値を指定した際の詳しい内容は以下のようになります。

水平方向の位置(x軸)

影の水平方向の位置を指定します。
プラスの値で右側に、マイナスの値で左側に影が伸びます。

垂直方向の位置(y軸)

影の垂直方向の位置を指定します。
プラスの値で下側に、マイナスの値で上側に影が伸びます。

ぼかし半径(大きさ)

影のぼかし具合を指定します。
値が大きい程ぼかしが大きくなり、指定しないと0となりぼかしはなくなります。

色

影の色を指定します。
色名やRGB、RGBAや他の形式でも指定可能です。
指定しない場合は、影の色がテキストの色と同じ色になります。

以上がtext-shadowプロパティの基本的な使い方となります。
次に各値を実際に指定していくつかの使用例(サンプル)を紹介いたします。

シンプルな影

div {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

とてもシンプルで面白くはないけれど、一番使われているかと思われるパターンのtext-shadowです。

縁取り

div {
    color: #999;
    text-shadow: 1px 1px #FFF, 1px -1px #FFF, -1px 1px #FFF, -1px -1px #FFF;
}

文字色を背景色と同じ色にして、text-shadowを4方向に1pxずつ設定しています。

立体(3D)

div {
    text-shadow:
        0 1px #CCC,
        0 2px #AAA,
        0 3px #999,
        0 4px #888,
        0 5px #777,
        0 6px #666,
        0 7px #555,
        0 8px #444,
        0 9px #333,
        0 10px #222;
}

複数の影を1pxずつずらして立体に見せています。最後だけ少しぼかしを入れてもいいかもしれません。

エンボス

div {
    text-shadow: 0 -1px 1px #FFF, 1px 1px 1px #000;
}

よくあるエンボス加工風。簡単に出来ますが、文字色や影の色のバランスの調整が微妙に難しい。

デボス

div {
    text-shadow: 0 1px #FFF;
}

エンボスと同じように簡単に作成できますが、こちらもバランスが難しい気がします。

ぼかし

div {
    color: transparent;
    text-shadow: 0 0 12px #fff;
}

文字の色を透明にして影をぼかしして見せています。

文字浮かし

div {
    text-shadow: 0 15px 10px rgba(255,255,255,0.5);
}

影をずらしてぼかす事で、文字が浮いているようにみせています。

光彩

div {
    text-shadow: 0 0 15px rgba(255,255,255,0.5), 0 0 30px #fff;
}

2つの影を合わせる事で、自然な光彩になります。もっと強くしたいのであれば、15pxと30pxの間もう1つ半透明なぼかしをいれてもいいです。

さいごに

いかがでしたでしょうか。
今回は、text-shadowで影(ドロップシャドウ)を付ける方法と使用例をいくつか解説しました。

ある程度のエフェクトはtext-shadowで再現できます。
デザインによっていろいろな影の表現がありますので、覚えておくとデザインの幅が広がります。