【CSS】文字に影をつけるには、text-shadowプロパティを使う！

CSSで「文字に影を付けたい！」という時は、text-shadowプロパティを使う。

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

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

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

その場合の指定の仕方は下記の通りだ。

※5px,3px,redの間はすべて半角スペースで間を空けるように。

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

• 最初の5pxが横方向の距離：5px分横にずらした影をつける。
• 2番目の5pxが縦方向の距離：5px分縦にずらして影をつける
• 最後の red は影の色：赤い影をつける

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

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

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