CSSの色の指定方法
みいと
おじさんのWEBデザイン学習まとめ
text-shadowプロパティを使用すると、テキストに影をつけることができます。
text-shadowプロパティの値には、下記の値を指定できます。
影の位置と、ぼかす範囲は単位つきの数値で指定できます。
16進数やrgbなどで影の色を指定できます。
noneは単独で使用するキーワードで、影をつけない設定をします。
text-shadowプロパティは、noneが初期値です。
text-shadowプロパティに数値を指定する場合は、2〜3個を半角スペースで区切って指定します。
影は複数指定することが可能です。
複数指定する場合は、2〜3個の数値と色を1セットとして、1セット毎にカンマで区切って指定します。
また、text-shadowプロパティで付けた影は、レイアウトには影響しません。
影をテキストからどのくらい右にずらすかを指定します。
マイナスの値を指定すると、影が左にずれます。
影をテキストからどのくらい下にずらすかを指定します。
マイナスの値を指定すると、影が上にずれます。
影をぼかす範囲を指定します。
0を指定するとぼかしがなくなり、大きな数字ほどぼかしが大きくなります。
マイナスの値は指定できません。
色は値の最初か最後に指定します。
text-shadowで下記のような指定をすると
text-shadow: 5px 5px 5px;
このような影が付きます。
先ほどの例に影を追加して2つ影をつけるには、下記のようにカンマで区切って指定します。
text-shadow: 5px 5px 5px, 20px 20px 5px red;
今回はテキストに影を付ける方法をまとめました。
影の設定によっては、文字が読みにくくなってしまうので注意が必要です。