FirefoxとIE双方に自然な影をつける

カテゴリ:CSSテクニック 2006年6月21日 17:33

png 画像はアルファ値を保存できる画像形式で、影などの徐々に透明になっていくような画像を作るときにとても便利な画像だ。
が、これがまたIEのあほが認識しない。透明部分を白く表示するもんだから、違和感この上ないのだ。n

背景が一色など、決まったものであれば白くなる部分にその色を敷いて、擬似的にきれいな影を表現できるが、背景が写真や複雑なパターンなどだとそうはいかない。n

ボックスを固定すれば問題ないが、それでは柔軟性に欠ける。
そこで、IE とその他の CSS を振り分けることを利用して、別々の画像を読み込ませることでこれを実現してみた。n

また、IE には独自仕様で影をつけるフィルタがあったりする。n

やり方は簡単、まず振り分けようの CSS を書き、(ここらへんは情報溢れてるので割愛)
IE には影のついていない画像を読み込ませる。そして、そのボックスに影をつけるフィルターを適用する。n

そして IE 以外の、png 形式を正しく表示できるブラウザ用に、背景として png 画像を読み込ませる。
これで完成だ。n

まぁ IE7 は png 形式をサポートするみたいだからいらなくなるかもしれないけど、
ま、思いついちゃったからとりあえずのっけとくw
なんか不具合があったらコメントにでも残しておいてください(;´□`)

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/3