ラク
こんにちは！ラクです。
この記事では、「文字に影を付ける方法」を紹介します！
目次
文字に影を付ける方法
「text-shadow」を使うと簡単に影を付けることができます！
text-shadowの使い方
試しにサンプルとそのコードを見て下さい！
p{
text-shadow: 7px 7px 5px gray;
}たった一行で文字に影をつけれました！
もちろん、text-shadowの値をいじると色んな影を作れます！
text-shadowの解説
では、次に「text-shadow」の一つ一つの値について解説すると、
text-shadow: 横のずらし幅 縦のずらし幅 ぼかし具合 影の色;となっています。
- 「横のずらし幅 」→横にどれだけずらすかを指定します。値をマイナスにすると左側にずれます。
- 「縦のずらし幅 」→縦にどれだけずらすかを指定します。値をマイナスにすると上側にずれます。
- 「ぼかし具合」→影をどれだけぼかすかを指定します。数値が大きくなるほど、ぼやけます。
- 「影の色 」→影の色を指定します。文字色より薄めの色がおすすめです。
MEMO1
ぼかし具合を指定しなかった場合は、ぼやけません。 MEMO2
影の色は、指定しないと文字の色がそのまま影になります。ラク
text-shadowを自分好みにカスタマイズして文字をオシャレにして見て下さい！
