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

CSS のプロパティの書き順をちゃんと決めることにした。

「今さらかよ」という声が聞こえてきそうですが。 前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。 ようやく踏ん切りが付きました。 ので、自分はこういう順番で書きますよー、という宣言 …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

floatとline-heightを一緒に指定すると、文字が欠ける。

ときどきWindowsのIEで、文字が数ピクセル欠けて表示されることがあります。 その原因の一つが、floatとline-heightを一緒に指定していること。 とりあえず同じ要素に指定しなければ発生 …

no image

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

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

no image

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例 …