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

ホバーエフェクトのキャプチャ 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

[vitaminsii]

一度試してみたいなぁ。

[thidaka58]

002

[hama_shun]

擬似要素で▼を作ってる

[kkeisuke]

:before :after

[warriorking]

(CSS)Adobeのサイトのあのかっこいいヘッダバーを実装するチュートリアル | コリス

[nors]

http://css-tricks.com/adobe-like-arrow-headers/

[keita_i]

試す

[hr07jp]

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

[Donca]

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