【コーディング初心者向け講座】文字に影をつけるCSSプロパティ「text-shadow」について学ぶ！〜CSS〜

IllustratorやPhotoshopでは「ドロップシャドウ」や「光彩」を使えば簡単に文字に影をつけることができます。

これをコーディングで再現するとき、text-shadowというCSSプロパティを使います。

text-shadowの使い方

書き方は［水平方向の距離］、［垂直方向の距離］、［ぼかしの大きさ］、［影の色］を指定するだけ！

記述例：text-shadow : 2px 2px 5px #f4f4f4

ドロップシャドウを再現する場合

光彩を再現する場合

影をより濃くしたい場合

4つの方向全てに影をつける記述をすることで、より影を濃くすることができます。

まとめ

text-shadowに影の横方向、縦方向、ぼかしの大きさ、色を指定するだけで簡単に文字に影をつけることができます。

今回は文字に影をつけるtext-shadowを紹介しましたが、画像などの要素に影をつけるbox-shadowというCSSプロパティもあるのでまた近いうちに紹介できたらと思います！