1ピクのラインにこだわったデザインスタディ
Post on:2008年12月17日
ヘッダ内、ヘッダとコンテンツなど異なる色の背景の区切りに1ピクセルのラインを使用したデザインスタディをSpoonfed Designのエントリーから紹介します。
![Envatoのサイトとラインのキャプチャ](/wp-content/uploads/2008121704-01.png)
How To: Using Highlights In Web Design
1ピクセルのホワイトのライン
![1ピクセルのホワイトのラインを配置したキャプチャ](/wp-content/uploads/2008121701-01.png)
一番簡単な使用例で、異なる色の間に1ピクセルのホワイトのラインを配置し、ハイライトの効果を持たせます。
![ハイライト効果を強くしたサンプルのキャプチャ](/wp-content/uploads/2008121701-02.png)
1ピクセルのラインを配置し、さらに上のエリアにシャドウをつけ、ハイライト効果を強くしています。
ベベル効果のライン
![2つのラインを配置したキャプチャ](/wp-content/uploads/2008121702-01.png)
1ピクセルの明るいラインと暗いラインの2つを配置し、ベベル効果を持たせます。
下のラインはホワイト、上のラインは下の背景より暗いグレーを使用しコントラストを持たせ、ベベルを強くしています。
![ベベル効果を持たせたサンプルのキャプチャ](/wp-content/uploads/2008121702-02.png)
ホワイトとグレーのラインを配置すると簡単にベベル効果を持たせることができます。
明るい色を使用したライン
![明るい色を使用したラインを配置したキャプチャ](/wp-content/uploads/2008121703-01.png)
コントラストの強いエリアに使用する場合は、ホワイトではなく下の色の明るいラインを配置します。
![明るい色を使用したラインのサンプルのキャプチャ](/wp-content/uploads/2008121703-02.png)
1ピクセルのラインが無い場合やホワイトのラインを使用するよりもよりハイライトの効果を持たせることができます。
実際のサンプル集
![Envatoのサイトとラインのキャプチャ](/wp-content/uploads/2008121704-01.png)
Envato
明るい色を使用したラインの例です。
![Freelance Switchのサイトとラインのキャプチャ](/wp-content/uploads/2008121704-02.png)
Freelance Switch
明るい色とベベル効果のラインの例です。
![CSS Maniaのサイトとラインのキャプチャ](/wp-content/uploads/2008121704-03.png)
CSS Mania
ハイライトのラインを一番上に更に配置している例です。
![Donor Toolsのサイトとラインのキャプチャ](/wp-content/uploads/2008121704-04.png)
Donor Tools
エリアの片方がホワイトの場合の例です。
![Designchuchiのサイトとラインのキャプチャ](/wp-content/uploads/2008121704-05.png)
Designchuchi
ベベル効果とハイライト効果で2つのエリアが流れるようにきれいになっています。
sponsors