DesignWalker » 透過PNG

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

admin — Wed, 21 May 2008 05:29:25 +0000

最近では、透過PNGを使ってとってもきれいに背景を透かしたウェブデザインを良く見かけます。

IE6.0以前のバージョンでは、通常、透過PNGがうまく表示されないのですが、

IE PNG Fixなどのスクリプトを使えば、きれいに表示されますね。

透過PNGをうまく使っている例では、こちらのサイトは有名ですね。

Silverback

ぱっと見、普通のサイトなのですが、ブラウザの横幅を縮めたり伸ばしたりしてみると…とってもきれいなレイヤーになってます。残念ながら、IE6ではうまく表示されません。

How to recreate Silverback’s parallax effect

Silverbackのデザインは以下のサイトで詳しく解説されています。図でもわかるように、４重のレイヤーになっているようです。使えそうなアイデアですね。

CSS Gradient Text Effect

CSSを使って、テキストにに透過PNGをかぶせると、簡単に光沢のある効果が出せます。上にかぶせるPNG次第でいろいろ使えそうなアイデアですね。

GlassBox

周りの枠がきれいに透けるLightboxスクリプトです。

Fun with Transparent PNG Images

画像に透過PNGをかぶせてもいろいろできそうですね。

Fade Out Bottom

下の画像では、少しわかりにくいですが、ページ下部がグラデーションになっていて、テキストがフェードアウトしていきます。とってもきれいなエフェクトですね。

Creative Use of PNG Transparency in Web Design

その他いろいろ、透過PNGを使ったアイデアが紹介されています。

透過PNGを使うと、いろいろとデザインの幅も広がっていきそうですね。

今回は、透過PNGをうまく使ったウェブデザインや、透過PNGを使わなくても、きれいに透けているサイトなどをいろいろとまとめてみました。

Silverback

最初にご紹介した、Silverback。奥行きを感じますね。

Alex Buga

枠の透け具合や、光の感じなど絶妙です。

IRIS Interactive

とってもかわいいデザインですね。

electric pulp

微妙な汚れ具合がとってもいい感じですね。

The portfolio of Bryan Katzel

どこまでもスクロールしたくなるサイト。

olliekav.com

背景が固定されているパターン。とってもダイナミックですね。

revota

ヘッダー部分の陰が、ごちゃごちゃした背景から、メニューをうまく分離させて、馴染ませていますね。

Dragon Interactive

かなり質感のあるサイトですね。

trevorsaint.com

ヘッダーとフッター部分の透過がきれいです。

Heartbeat Digital

Flashサイトなのですが、とってもきれいだったのでご紹介。

Elliot Jay Stocks

背景は固定されていて、サイドバーの部分が透過しています。

Cult-foo

スクロールするとヘッダー部分がついてくる、とってもかわいいサイトです。

soundfell.com

背景の植物がきれいに透けてますね。

Enlighten Designs

気にならない程度の透け具合がいい感じ。右上の光もさりげなくて、いいですね。

Buffalo – Web design & E-commerce

こちらもサイドバーが透けています。

Bits & Pixels

シンプルですが、とってもきれいなサイトですね。

Digital Artifex

周りの枠がいい感じで透けていますね。

Revyver

画像の枠がさりげなく透過していて、きれいですね。

magouya’s Blogfolio

両サイドの透過がいい感じですね。

kara burke illustrations

右下のお花がかわいい。

Inkoherence

かなりインパクトのあるデザインですね。

neodar design glasgow

マウスオーバーすると、透けている枠が真っ白になって読みやすくなります。

Rawnet.com

周りの枠のグラデーションがきれいですね。

透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる

admin — Wed, 27 Dec 2006 18:06:47 +0000

先日ご紹介した、「透過PNGをIE6以下のバージョンで綺麗に表示する方法」というエントリーなんですが・・・

意外なほどにアクセスがあり、ありがたいことに、現在このブログの一番の人気エントリーになっております。。。

この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。

この方法では、imgタグに入れられたPNGファイルのみに有効なため。。。上に文字をのせたりすることができませんでした。。。

っちゅうわけで、透過PNGをCSS（スタイルシート）の背景画像としてあつかえたら、さらにさらに便利やのになぁ～。。。なぁ～んて”韓流”プログラマのユンサンにお話してみたところ。。。

ちょいちょいと作ってくれました～！！！

「透過PNG と IE と IE7」
っという、なんだか、「部屋とYシャツと私」的なタイトルのエントリーでご紹介されております！！

このスクリプトを使いますと。。。

test

こんな感じでCSSでPNGを背景に指定してもIE6でも綺麗に表示されます！！

ちゅうわけで、肝心のやり方のご説明。（プログラマな方は韓流”プログラマのユンサンの方からどうぞ）

1. iepngfix.jsっちゅうスクリプトをダウンロードしてサーバにアップロード（右クリックで対象を保存で。）

2. 透過PNG画像を表示したいhtmlのからの間に

って書いてiepngfix.jsを読み込みます。

3. CSS（スタイルシート）でPNGファイルをバックグラウンド指定してるクラスやIDに以下の一行を追加。

* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

（赤字の部分はPNG画像を指定したクラス名、もしくはID名を）

これで、IE6や5.5のバージョンでも綺麗に透過PNGを、CSS（スタイルシート）で操ることができますね～！

関連ブログ

透過PNGをIE6以下のバージョンで綺麗に表示する方法

admin — Fri, 15 Dec 2006 18:04:13 +0000

IE7では、やっとこさ標準でサポートされた、透過PNGですが、まだまだIE6以下のバージョンを使ってるユーザーが多いっちゅうわけで、透過PNGを使わないデザイナーさんが多いようですが。。。

透過GIFだと、角を丸くしたりすると曲線がギザギザに表示されて、非常に汚くなってしまいます。。

これまでは。。。↓こんな感じになってしまってました。。

上の↑のサンプルは背景を黒にして、透過GIFを貼り付けた例ですわ。汚いですねぇ。。。

っちゅうことで。。↓こんな感じにしてみました。。

上の↑のサンプルは背景を黒にして、透過PNGを貼り付けた例ですわ。
普通に透過PNGを貼り付けただけだと、IE6以下のバージョンでは、うまく表示されないようなので。。。

この↓JavaScriptを使いますねん。(右クリックで保存してくだされ）

透過PNGをIE6以下のバージョンで綺麗に表示するJavaScript

んでもって、ダウンロードしたpngfix.jsファイルをアップロードして、htmlのからの間に以下のコードをコピペ。

<br />
<!--[if lt IE 7.]><br />
<script defer type="text/javascript" src="pngfix.js"></script><br />
<![endif]--><br />

透過PNGだと、アルファの部分も綺麗に表示されるので、デザインの幅もかなり広がりそうですねぇ～。
早速使おっと。

更新情報：
「透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる」
エントリーを追加しました。あわせてお試しください～！(12 27, 2006)