背景画像をうまく使ったデザインエージェンシーのサイト

斬新なレイアウトがしたい。

そんなときに参考になるのが、『hauser lacour』。背景画像をうまく使ったデザインエージェンシーのサイトです。

大きい背景画像がインパクトありますね。2枚の画像が重ねられていて、1枚は1200px程度の写真、もう1枚は、1200px程度のグレーの切り返しの透過PNGとなっています。

背景画像がブラウザサイズに合わせて伸縮しますが、昨日紹介したjquery.backstretch.js（jQueryを使ったストレッチする背景画像）ではなく、「intro.js」に独自にJavaScriptが書かれていて、window.onloadに設定がありますね。

透過PNGということはIE6への対応が必要ですが（そろそろやめたいですが）、以下のようにIE6用にCSSが指定してあって、「iepngfix.htc」が使われています。

<!--[if lte IE 6]><link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen" title="no title" charset="utf-8" /><![endif]-->

デザインや色使いもクールなので、一度見てみてください。

iPhone4をゲット！！！いや〜待ちました。待ちくたびれて感動もちょっと薄れていますが、ひとまず満足です。デザインも、大きさも、持ったときの感触もいいですね。

3GSはホワイトの方が好きだったけど、4はブラックの方がいい感じ。めちゃかっこいい。

Comment