CSS3からtext-shadowというプロパティが追加されました。
このプロパティは、テキストに影をつける効果があります。
text-shadowプロパティの書き方
.text-shadow { text-shadow: 0 0 5px #333333; }
左から「水平方向の距離」、「垂直方向の距離」、「影のぼかし半径」、「影の色」を指定します。
詳しくはリファレンスなどをご覧ください。
HTMLクイックリファレンス
このプロパティは(当然のことのように)IEで効きません。
そのため、IEではjavascriptを使用するか、IE独自の「filter」を使う必要があります。
IE対策
対策としては以下2つの方法があります。
- javascriptを使用する
- 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をブロック要素にする必要もあるので併せてご注意ください。
最近のコメント