１ピクのラインにこだわったデザインスタディ
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
How To: Using Highlights In Web Design
１ピクセルのホワイトのライン
一番簡単な使用例で、異なる色の間に１ピクセルのホワイトのラインを配置し、ハイライトの効果を持たせます。
１ピクセルのラインを配置し、さらに上のエリアにシャドウをつけ、ハイライト効果を強くしています。
ベベル効果のライン
１ピクセルの明るいラインと暗いラインの２つを配置し、ベベル効果を持たせます。
下のラインはホワイト、上のラインは下の背景より暗いグレーを使用しコントラストを持たせ、ベベルを強くしています。
ホワイトとグレーのラインを配置すると簡単にベベル効果を持たせることができます。
明るい色を使用したライン
コントラストの強いエリアに使用する場合は、ホワイトではなく下の色の明るいラインを配置します。
１ピクセルのラインが無い場合やホワイトのラインを使用するよりもよりハイライトの効果を持たせることができます。
実際のサンプル集
Envato
明るい色を使用したラインの例です。
Freelance Switch
明るい色とベベル効果のラインの例です。
CSS Mania
ハイライトのラインを一番上に更に配置している例です。
Donor Tools
エリアの片方がホワイトの場合の例です。
Designchuchi
ベベル効果とハイライト効果で２つのエリアが流れるようにきれいになっています。
Post on:2008年12月17日
Comments
popo
on 2008年12月17日
http://coliss.com/feed がXMLパースエラーとなってしまって(Mac FF3)、うまく表示されなくなってしまいましたねえ。
コリス
on 2008年12月17日
情報、ありがとうございます。
feedを直しました。
ただ、feedburnerの方にはすぐに反映されないので、正常になるまでしばらくお待ちください。
追記：
feedburnerも正常になりました。
ketr
on 2008年12月17日
はじめまして。
この1pxがセンスの見せ所であり、デザインのキモなんですよね。
Designchuchiの色の使い方はすごくきれいですね。
コリス
on 2008年12月17日
> ketr さん
はじめまして :-)
Designchuchiは、ナビゲーションにも絶妙なラインが使用されていてきれいです。
ほんとに、1ピクがあるとないでは大違いですね。
YU
on 2008年12月17日
こんにちは。Designchuchiの例はレンチとその上の文字、ロゴも一直線にそろっていて気持ちいいです。こうした「ライン」を指摘すると「？」って顔をするデザイナーがいるんですが、気にしすぎなのかな。
コリス
on 2008年12月17日
> YU さん
そのデザイナーさんの意図しだいじゃないですかね。
僕は見えないグリッドに揃えるのが好きですが、不揃いにしてリズムを生み出しているのもあると思いますよ。