Web blog WEBブログ

テキストに影を付ける (text-shadow)

2019.04.08

こんにちは。コーダーの兼山です。

テキストに影をつけるCSSの『text-shadow』をつかった、色々な表現をご紹介します。
CSSのみでも様々な文字装飾をすることが可能です。

様々な場面で使用する機会が増えていますので、まとめておきます。

指定方法① 横方向、下方向を指定

指定方法② 下方向の指定

指定方法③ 横方向の指定

指定方法④ ぼかし具合と影の色のみ指定

指定方法⑤ 縁取りをする

指定方法⑥ ロングシャドウにする

備考:text-shadowについて

指定方法は以下の通りです。

text-shadow: 横方向の指定 下方向の指定 ぼかし具合の指定 影の色の指定;

複数指定の場合、カンマ『,』で区切ります。

まとめ

以前は、グラフィックソフト等を使って文字を画像として作成することもありましたが、text-shadowプロパティをつかうことで、文字装飾が簡単に表現できるようになりました。

メンテナンス時や変更のあった際、作業の負担を軽減できます。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口