IE対策として「text-shadow」の代わりに「filter」を使っても表示されない

CSS3からtext-shadowというプロパティが追加されました。
このプロパティは、テキストに影をつける効果があります。

text-shadowプロパティの書き方

.text-shadow { text-shadow: 0 0 5px #333333; }

左から「水平方向の距離」、「垂直方向の距離」、「影のぼかし半径」、「影の色」を指定します。
詳しくはリファレンスなどをご覧ください。
HTMLクイックリファレンス

このプロパティは(当然のことのように)IEで効きません。
そのため、IEではjavascriptを使用するか、IE独自の「filter」を使う必要があります。

IE対策

対策としては以下2つの方法があります。

  1. javascriptを使用する
  2. IE独自filterを使う

javascriptを使用する場合

以下のサイトを参考にしてください。
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow

IE独自filterを使う場合

glowというfilterを使用します。
このfilterでは、背後から光を当てたような効果(グロー効果)を与えることができます。

filter: glow(color=#333333,strength=5px);

colorで色を、strengtで効果の強さを指定します。

このfilterを使ってもテキストシャドウが表示されないことがあります。
どうやらCSSのbackgroundプロパティと同時に使えないようです。

filterが表示されない

.title {
	background: #dddddd;
	filter: glow(color=#333333,strength=5px);
}

filterが表示される

.title {
	background: #dddddd;
}
.title span {
	display: block;
	filter: glow(color=#333333,strength=5px);
}

このように、spanなどを使用し、backgroundプロパティと同時に使用するのを避けてください。
またこの時、spanをブロック要素にする必要もあるので併せてご注意ください。

2 件のコメント

  • 記事で紹介されているスクリプトの作者です。

    IEでfilterがあたらないケースは、背景が原因なのではなく、おそらくhasLayoutがfalseになっているからではないでしょうか。
    例えばwidthを与えるなり、zoom:1を与えたら背景があっても適用されると思いますが、如何でしょうか?

    • コメントありがとうございます。

      上記 .title に zoom:1 や width を付加してみましたが、IEでfilterは適応されませんでした。
      ほか、height:1% や position:absolute も試してみましたがやはりfilterが適応されませんでしたので、hasLayoutが原因ではないのかなぁと思います。

      もうちょいいろいろ調べて見ようと思います。
      原因探求のためのヒントありがとうございます。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA