透過処理のバグを回避するデザインを考える



Internet Explorerをお使いの方には問題なく表示されるPNGの透過属性ですが、Netscapeユーザーの方には無視されて表示されてしまいます。PNGでデザインしていてそこが一番のネックだったりします。
そこで、どちらでも何とか無理なく表示させることができるテクニックを考えてみましょう。

●背景色と同じ色で塗りつぶしてあるものを使う。
例えば、黒や黒っぽい背景柄であったら、アイコンやボタンなどの背景色を黒で塗りつぶしたものを使ってみる。例えば、背景画像はこれアイコンはこれを使ってみましょう。
サンプルを開く→


●背景色と違う色で塗りつぶしてあるものを使う時。
どうしても同系色で塗りつぶしていないものを使いたいときは、テーブルを使ってレイアウトしてごまかしてしまいましょう。
無理矢理かもしれませんが、普通のレイアウトでも文章中心のところなんかではこういう感じのレイアウトは多いです。
たいていの素材は大きく分類されて、白バック用と黒バック用に分かれると思います。作者にお願いすると作ってくれるときもありますよ。
引き続き背景画像はこれ、アイコンはこんなのや、こんなのを使ってみましょう。
サンプルを開く→


Back