問題
テキストを縁取りしたい。
解決策
text-shadowをぼかしなしで重複で設定する。
テキストの視認性を上げる。
テキストの後ろに背景画像などを置いている場合、見にくくなってしまいます。
しかしテキストに背景色を設定するのも不格好…。
そんな時のためにテキストを縁取りする方法をご紹介します。
DEMOはこちら
テキストが縁取りされます。
HTMLの構築
pタグを用意します。
- ※便宜上、クラス「hemming」を設定しています。
<p class="hemming">テキストが縁取りされます。</p>CSSの構築
クラス「hemming」に対し、CSSを設定します。
.hemming {
color:#ffffff;
text-shadow: 1px 1px 1px #F15A24,-1px 1px 1px #F15A24,1px -1px 1px #F15A24,-1px -1px 1px #F15A24;
}ポイント!
text-shadowはカンマ（,）で区切ることで、重複で設定することができます。
参考
【IEでもキレイ！ブラウザ上でアウトライン（縁取り）を表現する方法 | 東京上野のWeb制作会社LIG】
https://liginc.co.jp/web/html-css/css/70065
コメント