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

テキストに影をつけることにより、視認性を高めたり見た目的にも良くなる場合があります。

やり方

text-shadow: 15px 15px 10px #D0D0D0;と指定するだけす。

1番目の15pxは横方向

2番目の15pxは縦方向

3番目の10pxはぼかし具合です。

4番目の#D0D0D0で色を指定しています。

まずが普通のテキストから見ていきます。

「テキスト」の文字に対して影をつけていきます。

先程のtext-shadow: 15px 15px 10px #D0D0D0;を指定します。

すると・・・

このように「テキスト」に影をつけることができました！