画像反転メニュー技術の研究_CSS/HTML

Fastcompany は、simplebits.com ウェブマスターによる完全な CSS+Div レイアウトです。

ウェブサイトのナビゲーションは CSS 画像反転を使用しています。表示するには、a:link と a:hover を使用する必要があります。さまざまな状態のさまざまな画像で構成されています。作者の独自性は CSS の a:hover にあると思います...

#nav a:hover {background-position: 0 -20px;}
# nav a:active {background-position: 0 -40px;}




ナビゲーションの背景画像は、a:link、a: の 3 つの状態にあります。 hover、および a:active 3 つの画像の代わりに、同じ画像が使用されます。CSS を使用して背景を垂直に配置すると、ボタンが変更されます。これにより、各ボタンの背景画像を 1 つ定義する必要がなくなり、多くのコードが節約されます。

ボタンには背景画像だけでなく、

ホーム

CSS を使用してテキストを非表示にします


#nav a {padding: 20px 0 0 0;overflow: hidden;}


非表示なので、わざわざテキストを記述する必要はありません。目的は、プレーン テキスト ブラウザーを使用しているとき (または CSS を参照していないとき)、ナビゲーション リンクを表示できるようにすることです。