CSSで

「文字に影を付けたい!」

って時は、text-shadowプロパティを使う。

ボックス自体に影をつけたい場合は、box-shadowプロパティを使うよね?

それと同じ感じで文字にはtext-shadowプロパティを使うのだ。

例えばHTMLのpタグの文字に影を入れるとする。

その場合、
【CSS】
p{
text-shadow:5px 3px red;
}
※5px,3px,redの間はすべて半角スペースで空ける!

こんな感じで記述すると影がつけられる。

text-shadow : 5px 5px red; が何を表しているかというと

最初の5px横方向の距離→つまり5px分横にずらした影をつける。

2番目の5px縦方向の距離→つまり5px分縦にずらして影をつける

最後の red は影の色のことだ。→つまり、赤い影をつけるってこと。

こんな感じで影を付けることができる。

これが基本の文字に影をつけるやり方で、その他にもぼかした影をつけたり、複数の影を付けることもできる!

それは後々また整理していきたい。

 

おすすめの記事