btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

(X)HTML CSS

背景画像を設定した要素のテキストに IE でもドロップシャドウを表示する方法。

投稿日:

CSS3 には「text-shadow」というプロパティがあり、これを指定するだけでテキスト要素に影を付けることができます(色や距離やぼかし具合もコントロール可)。
ただし、IE 以外ですが。例に漏れず。

IE9 からは CSS3 にもある程度対応するそうですが、現行の IE8 までは完全に無視されます。

で、IE でも CSS3 を使えるようにしたり、ドロップシャドウを擬似的に実現する方法が幾つかあるらしく、色んなところで紹介されています。

ただ、なぜか上記の方法ではうまくいかず、結局「IE の独自拡張を直に書く」というベタ(?)な方法に辿り着きました。
なぜ他の方法が使えなかったのか、詳しい経緯は覚えてません。
ひょっとしたら、「本当はうまくいってたけど設定が間違ってて出来ないと勘違いした」なんてケースもあるかも……。
ちゃんと履歴は残しとかないとダメですねすいません。

さて、独自拡張で何とか「ドロップシャドウっぽい」ことができるようになったのですが、ここでまた問題発生。
どうも背景画像を設定している要素では、うまく効いてくれないようなのです。
その理由は、なんとドロップシャドウが背景画像のさらに下(裏側)に表示されるようになっていたこと。
つまり、一応ドロップシャドウが表示するようにはしてたけど、背景画像で隠れて見えなかった、という訳です。

なので、背景画像を設定した中に、テキスト用の要素をもう一つ追加することで、何とか IE でもドロップシャドウっぽい感じにすることができました。

ソースと設定方法

「h1 要素に背景画像を設定してそのテキストに影を付ける」という仮定で、設定方法をご紹介します。

まずは HTML。

<h1><span class="text">テキスト</span></h1>

「<span class=”text”>~</span>」がテキスト用(ドロップシャドウ用)に追加した要素です。
もし背景画像を使わないのなら、これは要りません。

そして CSS。

h1 {
background: url("hoge_bg.jpg") left top no-repeat;
}

/* モダンブラウザ用 */
h1 .text {
text-shadow: 1px 1px 1px #000;
}

/*IE6以下用*/
* html h1 .text {
display: block;
width: 100%;
filter: Shadow(Color=#000000, Direction=135, Strength=2);
}

/*IE7用*/
:first-child + html h1 .text {
display: block;
width: 100%;
filter: Shadow(Color=#000000, Direction=135, Strength=2);
}

/*IE8用*/
head~/* */body h1 .text {
display: block;
width: 100%;
filter: Shadow(Color=#000000, Direction=135, Strength=2);
}

IE6、IE7、IE8 用に、それぞれハックで個別に設定をしています。
内容はまったく同じなのでまとめてしまっても良いと思いますが、何となく。

あと、IE の独自拡張の注意点として、自由度の低さがあります。
CSS3 の text-shadow なら大体のことは自由に設定できますが、IE 独自拡張はぼかし具合が設定できません
距離も確か設定できないはずで、色や角度も効かないことがあったような。(曖昧ですいません)

なので、袋文字みたいな表現はできないと考えた方がいいです。
別の独自拡張を使ったら出来るかも知れないですけど。

ブラウザごとにいちいち設定をしないで済むような時代が早く来れば良いですね……。
来ないかな…………。
来ないんだろうな………………。







-(X)HTML, CSS
-, , , , ,

執筆者:


  1. >ブラウザごとにいちいち設定をしないで済むような時代が早く来れば良いですね…

    これは切に願います…
    IE6はもういい加減切りたいですw

comment

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

関連記事

no image

HTML 文字参照を探すのに Wikipedia はやっぱり便利だった。

Wikipedia には度々お世話になってます。 信頼性とかが問題になることもありますが、大体は大丈夫ですし、やはりあの圧倒的な情報量は魅力ですね。 で、(やっぱり)こんなものまであったのか! という …

no image

今日は裸の日 – CSS Naked Day。

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。 »CSS Naked Day…公式(?)サイト »そういえば裸の日でした|CSS HappyL …

no image

Firefox でテーブルの線(border)が表示されたりされなかったりする件の対策。

珍しく Firefox のバグです(だと思います)。 あえて「解決法」ではなく「対策」としたのは、解決したかどうか定かではないからです。 つまり、「よく分からんけど、とりあえずうまくいってるっぽい」と …

no image

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なと …

no image

リスト形式でマークアップした画像の下にできるすき間とその解決法。

よくぶつかる問題の割に忘れがちなので、メモ的エントリー。 画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。 グローバルナビとか、写真のサムネイルとか …