80 エリアを重ねたような立体感のあるレイアウト | デザインってオモシロイ -MdN Design Interactive-


80 エリアを重ねたような立体感のあるレイアウト
制作・文=高津戸壮(zudolab)

To Use
XHTML
CSS
JavaScript
Photoshop
Illustrator
Fireworks
透過PNG





【1】サンプルで用意したデザインは、ページの一部であるが、エリア同士が重なり合っているように見える。このようなデザインを実現するのに、難しいCSSの知識は何も必要ない





【2】このデザインをXHTMLで組んだときの各エリアの枠は、このようになっている。エリア同士を重ねているわけではなく、指定している背景画像に工夫することで、重なり合っているように見せている。これは緑の枠でくくった部分で囲まれている部分に、背景画像を指定している


XHTML


CSS

【3】エリア同士をただ並べてみても、いまひとつ印象が薄い。そんなときは、エリア同士を重ねたような立体感のある表現を試してみよう。背景画像の工夫ひとつで、立体的に見せることが可能になる


▼使いどころ
エリア同士をただ並べてみても、いまひとつ印象が薄い。そんなときは、エリア同士を重ねたような立体感のある表現を試してみよう。背景画像の工夫ひとつで、立体的に見せることが可能になる。
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

月刊MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

9.10-9.16