IllustratorやPhotoshopでは「ドロップシャドウ」や「光彩」を使えば簡単に文字に影をつけることができます。
これをコーディングで再現するとき、text-shadowというCSSプロパティを使います。
text-shadowの使い方
書き方は［水平方向の距離］、［垂直方向の距離］、［ぼかしの大きさ］、［影の色］を指定するだけ！
記述例：text-shadow : 2px 2px 5px #f4f4f4
ドロップシャドウを再現する場合
光彩を再現する場合
影をより濃くしたい場合
4つの方向全てに影をつける記述をすることで、より影を濃くすることができます。
まとめ
text-shadowに影の横方向、縦方向、ぼかしの大きさ、色を指定するだけで簡単に文字に影をつけることができます。
今回は文字に影をつけるtext-shadowを紹介しましたが、画像などの要素に影をつけるbox-shadowというCSSプロパティもあるのでまた近いうちに紹介できたらと思います！
▼ Webデザインもコーディングもこれ１冊で学べます！オススメ。
created by Rinker
¥2,585
(2024/10/14 07:23:26時点 楽天市場調べ-詳細)
コメント