Adobeは自社サイト内のモジュールで、結構クールなヘッダーバーを使用していますよね。

adobeheaders 577x342 画像を使わずAdobeっぽいヘッダーをCSS疑似要素で作成

ヘッダーバーは右側と左側の2つのセクションに分かれています。左側は説明用のタイトルで、右側は関連リンクになっています。では実際このヘッダーバーがどの様に作られているのか考えてみましょう。まず第一に、これはnon-sprite画像を使用しています。

RouterTwitter dark 画像を使わずAdobeっぽいヘッダーをCSS疑似要素で作成

これはどういう意味かと言うと、ヘッダー用に追加のHTTPリクエストが必要だと言うことです。更に付け加えると、:hover効果は全く別のイメージです。すなわち更に追加のHTTPリクエストが必要で、最初のhover上の2つ目のイメージが読み込まれる間に「黒のフラッシュ」が存在してしまうことを意味します。

私たちはこれを画像を一切使わずに再現してみましょう!

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

arrowheader 画像を使わずAdobeっぽいヘッダーをCSS疑似要素で作成

ヘッダーのマークアップはリンク込みのタイトルです。

<div class="module">
  <h2>Community <a href="#">Blue</a></h2>
  <!-- stuff in module -->
</div>
   

こちらがヘッダー用の基本設定です。リンクの部分は色付けして、ボーダーで白線を付け加えています。

.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;
}
   

いよいよ核心に迫ってきました。CSS Triangleを適用させるだけで矢印が完成します。

triangles 577x206 画像を使わずAdobeっぽいヘッダーをCSS疑似要素で作成

.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;
}
   

Adobeのサイトと今回の方法とで大きく違うことが1つあります。それはAdobeの方は矢印の部分も含めグラデーションになっていることです。CSS Triangleの技法でグラデーションを適用することは現実的ではないので、今回の方法ではこの部分は再現出来ません。かといって全くグラデーションさせることが出来ないかと言うとそんなこともなく、矢印がアタッチされているメイン部分は単色で残しておけばいいと言うだけです。

topandbottom 577x209 画像を使わずAdobeっぽいヘッダーをCSS疑似要素で作成

デモページでは他の色やトランジッション、二重の三角部分にフェイクの画線を添えたものなども作ってみたので、よろしければご覧くださいね。