[CSS]CSS3対応ブラウザだとより美しいドロップダウン型のナビゲーション
Post on:2010年2月25日
sponsors
CSS3非対応ブラウザでも正常に動作する、CSS3で実装したドロップダウン型ナビゲーションを実装するチュートリアルをWeb Design Wallから紹介します。
上記のキャプチャはCSS3対応ブラウザ（Chrome）のもので、非対応ブラウザでも下記のように正常に動作します。
CSS3非対応ブラウザ（IE7）でのキャプチャ
CSS3対応ブラウザでは角丸やボックスシャドウのスタイルが適用され、非対応ブラウザではそれらが無しでも違和感のないようにデザインがされています。
ナビゲーションはリスト要素で実装されており、CSS3の角丸はem指定など細かい箇所にも巧みなテクニックがうかがえます。
実装のイメージ
使用している画像は幅1pxのグラデーションのPNG画像一枚だけで、透過画像のためカラーはスタイルシートで指定を行っています。
背景に使用しているグラデーション画像
sponsors
