1ピクのラインにこだわったデザインスタディ
Post on:2008年12月17日
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに1ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。

How To: Using Highlights In Web Design
1ピクセルのホワイトのライン


一番簡単な使用例で、異なる色の間に1ピクセルのホワイトのラインを配置し、ハイライトの効果を持たせます。


1ピクセルのラインを配置し、さらに上のエリアにシャドウをつけ、ハイライト効果を強くしています。
ベベル効果のライン


1ピクセルの明るいラインと暗いラインの2つを配置し、ベベル効果を持たせます。
下のラインはホワイト、上のラインは下の背景より暗いグレーを使用しコントラストを持たせ、ベベルを強くしています。


ホワイトとグレーのラインを配置すると簡単にベベル効果を持たせることができます。
明るい色を使用したライン


コントラストの強いエリアに使用する場合は、ホワイトではなく下の色の明るいラインを配置します。


1ピクセルのラインが無い場合やホワイトのラインを使用するよりもよりハイライトの効果を持たせることができます。
実際のサンプル集



Envato
明るい色を使用したラインの例です。


Freelance Switch
明るい色とベベル効果のラインの例です。


CSS Mania
ハイライトのラインを一番上に更に配置している例です。


Donor Tools
エリアの片方がホワイトの場合の例です。


Designchuchi
ベベル効果とハイライト効果で2つのエリアが流れるようにきれいになっています。
sponsors