広告あり

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

コーディング

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

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

Sponsor

text-shadowの使い方

書き方は[水平方向の距離][垂直方向の距離][ぼかしの大きさ][影の色]を指定するだけ!

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

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

光彩を再現する場合

影をより濃くしたい場合

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

まとめ

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

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

 

▼ Webデザインもコーディングもこれ1冊で学べます!オススメ。

コメント