IE6用透過pngデザイン

In: css|JavaScript

9 9月 2008

マークアップエンジニア/CSSコーダーにとって、透過pngは鬼門である。

しかしクリエイティブ氏からこういうデザインを実現したい、という要望を受けた。
こういう場合、通常なら透過した部分をそのまま画像として切り出すのだけど、今回は背景画像が動的に切り替わるとのことで、メニュー部分を半透明にする必要がある。

そこで今まで試していなかったIE6用のJavaScriptライブラリを試してみることにする。
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌

しかし、透過pngはIE6がなぜか対応していないので問題になる。現状のシェアでは、まだIE6を無視するわけにはいかない。

そこでkづあんのJavaScriptライブラリ「alphafilter.js」を導入してみると…。

IE6透過pngテスト
うまくいきました。

広告

方法も、JavaScriptを読み出したら

画像のclass名にalphafilterを指定

    <img src="./sample.png" class="alphafilter" alt="" />

背景の透過PNGの場合は次のように行います。

    <p class="alphafilter">内容</p>

IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js」:phpspot開発日誌

と、とてもシンプル。これは素晴らしい。
僕もいつかはこういう、人の役に立つ素晴らしい何かを作れたら、と思いつつ今日も勉強勉強である。

コメント

Comment Form

About this blog

ここは、SE見習いである私ことdaceloが、日夜習得していくシステム関連の備忘録、phpやWordPressTipsのネタ、あるいはSEOやWebマーケティング関連の雑感を投稿するブログです。 平日は大体毎日投稿しています。土日は休業日です。

カテゴリー

カテゴリー

アーカイブ