【CSS】文字に影をつけてオシャレにしよう!text-shadowを解説

ラク

こんにちは!ラクです。

この記事では、「文字に影を付ける方法」を紹介します!

文字に影を付ける方法

「text-shadow」を使うと簡単に影を付けることができます!

text-shadowの使い方

試しにサンプルとそのコードを見て下さい!




p{
  text-shadow: 7px 7px 5px gray;
}

たった一行で文字に影をつけれました!

もちろん、text-shadowの値をいじると色んな影を作れます!

text-shadowの解説

では、次に「text-shadow」の一つ一つの値について解説すると、

text-shadow: 横のずらし幅 縦のずらし幅 ぼかし具合 影の色;

となっています。

  • 「横のずらし幅 」→横にどれだけずらすかを指定します。値をマイナスにすると左側にずれます。
  • 「縦のずらし幅 」→縦にどれだけずらすかを指定します。値をマイナスにすると上側にずれます。
  • 「ぼかし具合」→影をどれだけぼかすかを指定します。数値が大きくなるほど、ぼやけます。
  • 「影の色 」→影の色を指定します。文字色より薄めの色がおすすめです。
MEMO1
ぼかし具合を指定しなかった場合は、ぼやけません。
MEMO2
影の色は、指定しないと文字の色がそのまま影になります。

ラク

text-shadowを自分好みにカスタマイズして文字をオシャレにして見て下さい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です