DesignWalker

最近では、透過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

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