全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
テキストに影を付ける (text-shadow)
2019.04.08
※この記事は2019年04月08日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
テキストに影をつけるCSSの『text-shadow』をつかった、色々な表現をご紹介します。
CSSのみでも様々な文字装飾をすることが可能です。
様々な場面で使用する機会が増えていますので、まとめておきます。
【目次】
- 1. 指定方法① 横方向、下方向を指定
- 2. 指定方法② 下方向の指定
- 3. 指定方法③ 横方向の指定
- 4. 指定方法④ ぼかし具合と影の色のみ指定
- 5. 指定方法⑤ 縁取りをする
- 6. 指定方法⑥ ロングシャドウにする
- 7. 備考：text-shadowについて
指定方法① 横方向、下方向を指定
指定方法② 下方向の指定
指定方法③ 横方向の指定
指定方法④ ぼかし具合と影の色のみ指定
指定方法⑤ 縁取りをする
指定方法⑥ ロングシャドウにする
備考：text-shadowについて
指定方法は以下の通りです。
text-shadow: 横方向の指定 下方向の指定 ぼかし具合の指定 影の色の指定;
複数指定の場合、カンマ『,』で区切ります。
まとめ
以前は、グラフィックソフト等を使って文字を画像として作成することもありましたが、text-shadowプロパティをつかうことで、文字装飾が簡単に表現できるようになりました。
メンテナンス時や変更のあった際、作業の負担を軽減できます。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
