Webサイト制作日報

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

以前は透過したスモーク画像をテキストの裏に配置してごまかしたりｗ
テキストを画像化する事もありましたが、マークアップとしては不本意でした。
そこで、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を利用する例も増えているようです。

| コメント(0) | CSS | |