[CSS]Adobeのサイトのあのかっこいいヘッダバーを実装するチュートリアル
Post on:2011年12月22日
sponsors
Adobeのサイトに実装されている矢印が添えられたヘッダバーを元に、クールなエフェクトを加えてより実用的に実装するチュートリアルを紹介します。
[ad#ad-2]
下記は各ポイントを意訳したものです。
Adobeのサイトのかっこいいヘッダバー
まずは、Adobeのサイトに実装されているかっこいいヘッダバーを見てみましょう。
ヘッダバーは左と右のセクションに分かれており、左に説明的なタイトル、右に関連リンクが配置されています。
ヘッダバーの拡大
このバーは画像で、非スプライトで実装されています。
これは余分なHTTPリクエストを生じさせ、もっと悪いことにホバーエフェクトでは別の画像が読み込まれています。
[ad#ad-2]
※日本のサイトでも同様のヘッダバーが備わっています。
Adobe Photoshop CS5 Extended：日本サイト
ヘッダバーの拡大
よりクールに実装するチュートリアル
このヘッダバーを画像無しで実装することができます！
まずは、デモページを見てください。
ホバーエフェクトはカラーが変更するだけでなく、CSS3アニメーションで少しだけ幅が長くなります。
ホバーエフェクトのキャプチャ
HTML
マークアップは非常にシンプルで、内部にリンクを配置したただの見出しです。
<div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div>
CSS
ヘッダの基本となるスタイルで、a要素の左にborderでホワイトの領域を設定します。
.module h2 {
background: #ccc;
padding: 0 0 0 10px;
font-size: 16px;
/* Thickness of the bar more easily achieved with line-height
since padding would push link inward. */
line-height: 2;
}
.module h2 a {
float: right;
position: relative;
text-decoration: none;
color: #333;
padding: 0 10px;
border-left: 5px solid white;
}
このヘッダバーの大きな特徴である矢印を作ってみましょう。
矢印は擬似要素で三角をつくり、それを重ねます。
矢印の仕組み
スタイルシートは下記のようになります。
.module h2 a:before,
.module h2 a:after {
content: "";
position: absolute;
/* Pushed down half way, will get pulled back up half height of triangle
ensures centering if font-size or line-height changes */
top: 50%;
width: 0;
height: 0;
}
.module h2 a:before {
left: -12px;
/* Triangle */
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
/* Pull-up */
margin-top: -8px;
}
.module h2 a:after {
/* Smaller and different position triangle */
left: -5px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #a2d6eb;
margin-top: -6px;
}
このヘッダバーにはもう一つ重要なポイントがあります。
バーの上部と下部にグラデーションを使用しています。
上部と下部にグラデーション
デモではこれらのエフェクトに加え、異なるカラーバリエーションとCSS3アニメーションを使用しています。
sponsors
