透過をきれいに使ったウェブデザインいろいろ - DesignWalker

↑を見ていて、いいな！私も透過PNG使いたいな！と久しぶりにデザインがえを考えてます。

上のサイトの中でも特にSilverbackの画面の横幅を変えた時の葉の重なり具合が凄いキュートだと思って、こういうので何かできないかしら？と。
あんまり気付かれない感じの仕事なんだけど、なんかそこに萌えを感じます。

The portfolio of Bryan Katzelにいたっては、神業！！としか思えない！！
頭良いなあ、考えた人！

で、こういうサイトの透過PNGを使った効果ははIE6以下ではちゃんと見えないのよね。
もったいない。
なのに、IE6のシェアはまだまだぶっちぎり1位なんよね。
そこで、リニューアルに向けての勉強がてら、IE6でも透過PNGを使えるようになる「IE PNG Fix」を試しに使ってみた。

一応最終のイメージはこれ。
星の重なり＝透過PNGの重なりになっていて、3枚の透過PNGを重ねてます。
ちなみに、透過PNGをx軸にそってリピート。もちろん、ウィンドウの横幅をかえるとうにうに重なりが変わります。

さーまず重ねたところで、IE6でチェック☆

見事な透過スルー。
ええけどな。水色なのは透過部分の表現にこの色が使用されているから。
さーここから「IE PNG Fix」です。
まずは、ダウンロード。
現在、リンク先からダウンロードできるものは。v1.0。
これでもいいんだけど、これだと背景のリピートをサポートしていなくて、↓こんなことになります。

透過したものの、画像をリピートせずに画面いっぱいに拡大表示！！！
cssからリピート指定をはずせば、通常サイズになるので、リピートしなくても良いほど長い画像を用意すればこれはクリアできます。
だけど、この問題は、v2.0でクリアされているので、v2.0での手順を書くとこんな感じです。

１．「IE PNG Fix」から、Beta Testing Areaへ。
２．「IEPNGFix v2.0 Alpha — with background position/repeat!」をクリックしてダウンロード。
３．解凍後、「iepngfix.htc」、「blank.gif」、「iepngfix_tilebg.js」をフォルダにコピー。
４．cssに「img, div { behavior: url(iepngfix.htc) }」を追記。
５．HTMLのヘッダに「<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>」追記。

これでFirefoxとかと同じような見た目にできました！やったねー。

でも、あくまでも「同じような」。
なぜかというと、画面サイズ変更でうにうに動くが出来ていないから･･･。
あと、これは透過PNG関係ないけど、IE6のバックグラウンド固定は、body要素でしか効果を発揮しないので、背景の固定も出来ず・・・。
それも踏まえたデザインを考えねばなーというところです。
もしくは、毎日IE6の一日も早い消滅を祈ってお祈りするか。

背景の固定はともかく、サイズ変更でうにうにうごくは、もしかすると「IE PNG Fix」がどうにかしてくれるかもしれないので、こっそり期待しておこうと思います。
とりあえずv1.0でできるデザインを考えよう。そうしよう。

Category : WEB関連
Posted on 2008/08/15 金曜日 - 17:27:02 by mahochips
Jump to the comment form
http://maho.chips.jp/diary/archives/1016/trackback