[CSS]CSS3対応ブラウザだとより美しいドロップダウン型のナビゲーション

CSS3非対応ブラウザでも正常に動作する、CSS3で実装したドロップダウン型ナビゲーションを実装するチュートリアルをWeb Design Wallから紹介します。

デモのキャプチャ

CSS3 Dropdown Menu
デモページ

上記のキャプチャはCSS3対応ブラウザ(Chrome)のもので、非対応ブラウザでも下記のように正常に動作します。

デモのキャプチャ

CSS3非対応ブラウザ(IE7)でのキャプチャ

CSS3対応ブラウザでは角丸やボックスシャドウのスタイルが適用され、非対応ブラウザではそれらが無しでも違和感のないようにデザインがされています。

ナビゲーションはリスト要素で実装されており、CSS3の角丸はem指定など細かい箇所にも巧みなテクニックがうかがえます。

実装のイメージ

実装のイメージ

使用している画像は幅1pxのグラデーションのPNG画像一枚だけで、透過画像のためカラーはスタイルシートで指定を行っています。

画像のキャプチャ

背景に使用しているグラデーション画像

sponsors

top of page

©2018 coliss