１ピクのラインにこだわったデザインスタディ

ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに１ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。

How To: Using Highlights In Web Design

１ピクセルのホワイトのライン

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

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

ベベル効果のライン

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

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

明るい色を使用したライン

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

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

実際のサンプル集

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

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

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

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

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