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

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

Envatoのサイトとラインのキャプチャ

How To: Using Highlights In Web Design

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

1ピクセルのホワイトのラインを配置したキャプチャ

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

ハイライト効果を強くしたサンプルのキャプチャ

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

ベベル効果のライン

2つのラインを配置したキャプチャ

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

ベベル効果を持たせたサンプルのキャプチャ

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

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

明るい色を使用したラインを配置したキャプチャ

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

明るい色を使用したラインのサンプルのキャプチャ

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

実際のサンプル集

Envatoのサイトとラインのキャプチャ

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

Freelance Switchのサイトとラインのキャプチャ

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

CSS Maniaのサイトとラインのキャプチャ

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

Donor Toolsのサイトとラインのキャプチャ

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

Designchuchiのサイトとラインのキャプチャ

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

top of page

©2017 coliss