今回の記事ではテキストに影をつけるやり方を紹介いたします。

まずは何も指定していない状態から見ていきます。

画像内のテキストに影をつけたいとします。

やり方

text-shadow: 15px 20px 15px #aeaeae;

と指定します。

最初の15pxで影の横方向

次の20pxで影の縦方向

最後の15pxで影のぼかし具合

カラーコードで影の色を指定しています。

その結果

このようにテキストに影をつけることができます。

影をつけることで、メリハリをつけたり、視認性を高めることができます。