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

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

デザインblogランキング

コメント 6 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



6 Responses to “透過をきれいに使ったウェブデザインいろいろ”

  1. 日々、ウェブデザインとネットニュースとゲームとか。 Says:

    透過をうまく使ったウェブデザインとか。…

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

    Photoshopの代わりになる無料のWebサービス10選『10 Free Web-based Alternatives to Photoshop』 | CR……

  2. keyjam Says:

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

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

  3. Commit Lab » CSS Gradient Text Effectをやってみた Says:

    […] Walker さんの透過をきれいに使ったウェブデザインいろいろ を見て、興味深くまた簡単そうなCSS Gradient Text […]

  4. websocial.jp Says:

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

    Silverbackの奥行き感はすごい!…

  5. » IE6,IE5.5でもiepngfixで透過PNG画像を使ってウェブデザインをしよう - wordpressのテンプレート wpskinのブログ Says:

    […] ご覧のように、透過の出来・不出来で見栄えは全く変わってきます。透過画像を巧く使うことで、深みのあるデザインができるようになります。透過画像をうまく使ったサイトについては、Design Walkerさんのエントリーで紹介されていますので、是非ご覧になって下さい […]

  6. JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法 | 空が好きな人のメモ帳 Says:

    […] IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。 ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。 透過をきれいに使ったウェブデザインいろいろ | DesignWalker […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ