Blue Point Solutions

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

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

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

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

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

オリジナルの記事デモ

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

<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を適用させるだけで矢印が完成します。

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

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