透過をきれいに使ったウェブデザインいろいろ
最近では、透過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
周りの枠のグラデーションがきれいですね。
5月 21st, 2008 at 4:46 AM
透過をうまく使ったウェブデザインとか。…
透過をきれいに使ったウェブデザインいろいろ – DesignWalker
Photoshopの代わりになる無料のWebサービス10選『10 Free Web-based Alternatives to Photoshop』 | CR……
5月 21st, 2008 at 6:40 AM
こんばんわ！
いつも拝見させていただいております。
Dragon Interactiveさんのメニューなどのロールオーバー画像
は透過ではないですよね、あれはAJAXでしょうか？
デザインウォーカーさんと関係の無い話ですよね。。。
すみません。
もし分かるようでしたら！お聞かせいただきたいです。
5月 21st, 2008 at 9:52 PM
[...] Walker さんの透過をきれいに使ったウェブデザインいろいろ を見て、興味深くまた簡単そうなCSS Gradient Text [...]
5月 23rd, 2008 at 12:59 AM
透過をきれいに使ったウェブデザインいろいろ – DesignWalker…
Silverbackの奥行き感はすごい！…
12月 17th, 2008 at 2:51 AM
[...] ご覧のように、透過の出来・不出来で見栄えは全く変わってきます。透過画像を巧く使うことで、深みのあるデザインができるようになります。透過画像をうまく使ったサイトについては、Design Walkerさんのエントリーで紹介されていますので、是非ご覧になって下さい [...]
3月 8th, 2009 at 12:23 AM
[...] IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。 ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。 透過をきれいに使ったウェブデザインいろいろ | DesignWalker [...]