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

Adobeは自社サイト内のモジュールで、結構クールなヘッダーバーを使用していますよね。 ヘッダーバーは右側と左側の2つのセクションに分かれています。左側は説明用のタイトルで、右側は関連リンクになっています。では実際このヘッダーバーがどの様に作られているのか考えてみましょう。まず第一に、これはnon-sprite画像を使用しています。 これはどういう意味かと言うと、ヘッダー用に追加のHTTPリクエストが必要だと言うことです。更に付け加えると、:hover効果は全く別のイメージです。すなわち更に追加のHTTPリクエストが必要で、最初のhover上の2つ目のイメージが読み込まれる間に「黒のフラッシュ」が存在してしまうことを意味します。 私たちはこれを画像を一切使わずに再現してみましょう! この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 デモ ヘッダーのマークアップはリンク込みのタイトルです。 こちらがヘッダー用の基本設定です。リンクの部分は色付けして、ボーダーで白線を付け加えています。 いよいよ核心に迫ってきました。