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

最近では、透過PNGを使ってとってもきれいに背景を透かしたウェブデザインを良く見かけます。 IE6.0以前のバージョンでは、通常、透過PNGがうまく表示されないのですが、 IE PNG Fixなどのスクリプトを使えば、きれいに表示されますね。 透過PNGをうまく使っている例では、こちらのサイトは有名ですね。

Silverback

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

Silverback

How to recreate Silverback’s parallax effect

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

How to recreate Silverback’s parallax effect

CSS Gradient Text Effect

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

CSS Gradient Text Effect

GlassBox

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

GlassBox

Fun with Transparent PNG Images

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

Fun with Transparent PNG Images

Fade Out Bottom

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

Fade Out Bottom

Creative Use of PNG Transparency in Web Design

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

Creative Use of PNG Transparency in Web Design

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

Silverback

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

Silverback

Alex Buga

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

Alex Buga

IRIS Interactive

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

IRIS Interactive

electric pulp

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

electric pulp

The portfolio of Bryan Katzel

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

The portfolio of Bryan Katzel

olliekav.com

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

olliekav.com

revota

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

revota

Dragon Interactive

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

Dragon Interactive

trevorsaint.com

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

Heartbeat Digital

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

Heartbeat Digital

Elliot Jay Stocks

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

Elliot Jay Stocks

Cult-foo

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

Cult-foo

soundfell.com

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

soundfell.com

Enlighten Designs

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

Enlighten Designs

Buffalo – Web design & E-commerce

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

Buffalo - Web design & E-commerce

Bits & Pixels

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

Bits & Pixels

Digital Artifex

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

Digital Artifex

Revyver

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

Revyver

magouya’s Blogfolio

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

magouya’s Blogfolio

kara burke illustrations

右下のお花がかわいい。

Inkoherence

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

neodar design glasgow

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

neodar design glasgow

Rawnet.com

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

Rawnet.com

関連記事

6件のコメント

  1. こんばんわ!
    いつも拝見させていただいております。

    Dragon Interactiveさんのメニューなどのロールオーバー画像
    は透過ではないですよね、あれはAJAXでしょうか?
    デザインウォーカーさんと関係の無い話ですよね。。。
    すみません。
    もし分かるようでしたら!お聞かせいただきたいです。

  2. ピンバック: websocial.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です