CSS3 text-shadowで縁取り

Q ブログのヘッダに背景画像を利用すると、
画像と見出しの色が被って読み難くなる場合がある。
A CSS3のtext-shadowでテキストを縁取りしてやれば良い。
CSS3のtext-shadow

以前は透過したスモーク画像をテキストの裏に配置してごまかしたりw
テキストを画像化する事もありましたが、マークアップとしては不本意でした。
そこで、CSS3のtext-shadow(ドロップシャドウ)を利用すれば、テキストが画像のように目立ちます。
但し、IE10以上(CSS3のサポート状況 旧IEにはjQueryかfilterでしょうが面倒です)

CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow
CSS3 text-shadow

text-shadowの解説:
text-shadow: 2px 2px 3px #000;
text-shadow: 横方向 縦方向 ぼかし 影の色;
設置例(CSS):
h1 a {
color: #FFD700;
text-shadow: 2px 4px 3px #000;
}

スマホでboldが反映しない場合に、text-shadowを利用する例も増えているようです。




コメント

コメントを書く
お名前:

メール:

Web URL:

コメント: [必須入力]

認証コード: [入力必須] ※ 画像の文字を半角で入力してください。
認証 : 一二三

 ※ 承認されたコメントのみ表示されます。