[CSS]Adobeのサイトのあのかっこいいヘッダバーを実装するチュートリアル

サイト構築 -CSS

Post on:2011年12月22日

sponsorsr

Adobeのサイトに実装されている矢印が添えられたヘッダバーを元に、クールなエフェクトを加えてより実用的に実装するチュートリアルを紹介します。

Adobe-like Arrow Headers

[ad#ad-2]

下記は各ポイントを意訳したものです。

Adobeのサイトのかっこいいヘッダバー
よりクールに実装するチュートリアル

Adobeのサイトのかっこいいヘッダバー

まずは、Adobeのサイトに実装されているかっこいいヘッダバーを見てみましょう。

Adobe Photoshop CS5 Extended

ヘッダバーは左と右のセクションに分かれており、左に説明的なタイトル、右に関連リンクが配置されています。

ヘッダバーの拡大

このバーは画像で、非スプライトで実装されています。
これは余分な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;
}

このヘッダバーにはもう一つ重要なポイントがあります。
バーの上部と下部にグラデーションを使用しています。