【text-shadow】テキストに影をつける

text-shadowでテキストに影をつける

text-shadowプロパティを使用すると、テキストに影をつけることができます。

text-shadowプロパティ

text-shadowプロパティの値には、下記の値を指定できます。

• 単位つきの数値
• 色
• none

影の位置と、ぼかす範囲

影の位置と、ぼかす範囲は単位つきの数値で指定できます。

色

16進数やrgbなどで影の色を指定できます。

none

noneは単独で使用するキーワードで、影をつけない設定をします。
text-shadowプロパティは、noneが初期値です。

設定方法

text-shadowプロパティに数値を指定する場合は、2〜3個を半角スペースで区切って指定します。

影は複数指定することが可能です。
複数指定する場合は、2〜3個の数値と色を1セットとして、1セット毎にカンマで区切って指定します。

また、text-shadowプロパティで付けた影は、レイアウトには影響しません。

1番目の数値

影をテキストからどのくらい右にずらすかを指定します。
マイナスの値を指定すると、影が左にずれます。

2番目の数値

影をテキストからどのくらい下にずらすかを指定します。
マイナスの値を指定すると、影が上にずれます。

3番目の数値

影をぼかす範囲を指定します。
0を指定するとぼかしがなくなり、大きな数字ほどぼかしが大きくなります。
マイナスの値は指定できません。

色の指定

色は値の最初か最後に指定します。

サンプル

text-shadowで下記のような指定をすると

text-shadow: 5px 5px 5px;

このような影が付きます。

先ほどの例に影を追加して2つ影をつけるには、下記のようにカンマで区切って指定します。

text-shadow: 5px 5px 5px, 20px 20px 5px red;

テキストの影のまとめ

今回はテキストに影を付ける方法をまとめました。
影の設定によっては、文字が読みにくくなってしまうので注意が必要です。

みいと

Contact

興味を持ったものをいろいろと勉強しています。