text-shadow と outline

Category : CSS

引き続き CSS3 だよ。

今回はすでに多くのサイトで使われている text-shadow のこと。
凝ったことしなければ非対応ブラウザでもそんなに問題起きないし、かなり使いやすいと思います。

outline プロパティってありますよね。リンクをクリックしたときとかに出るボーダーみたいなの。
これと text-shadow が同時に表示されるとき、Firefox などの Gecko 系ブラウザだと他のブラウザと表示が違うのでちょっとテストしてみました。

テスト表示に使ったページはこちら。

text-shadow と outline テスト表示用ページ

HTML と CSS は以下のようになっています。

<p><a href="#" class="link">リンク(通常)</a></p>
<p><a href="#" class="link text-shadow">リンク(影有)</a></p>
p {
	margin-bottom: 30px;
}

.link {
	border: 1px solid #000;
	outline: 1px solid #f00;
}

.text-shadow {
	text-shadow: 0 0 10px #f0f;
}

これを IE 以外のブラウザ(Win)で表示すると以下の画像のようになります。

text-shadow と outline テスト表示の結果比較

Firefox だけアウトラインが影に合わせて広がっています。
ボーダーはどれも同じ位置。

これはちょっと対策しようがないような気がしますね……。
アウトラインが表示されるようなものにはぼかしの大きな影をつけないほうがいいんじゃないかと思います。

他には outline:0 を指定してしまうという手もありますが、対象がリンクだと個人的にはあんまりやりたくないですね。

Leave a Reply