[CSS]CSS3グラデーションを美しく効果的に使用したチュートリアル

思わずCSS3グラデーションを使いたくなってしまったチュートリアルをJanko At Warp Speedから紹介します。

Create Windows 7 start menu using CSS3 only
デモページ

デモはWindows7のスタートメニューを模したもので、左右のパネルのマウスオーバーに美しいグラデーションが利用されています。
※CSS3は他にもふんだんに使用されています。

左パネルのグラデーション

右パネルのグラデーション

また、右下にある画像のサムネイルをクリックすると、背景が変更されます。

背景の変更も可能

実装のイメージ

実装はシンプルな構成で、左右のパネルに配置されたリンクはリスト要素で実装されています。

実装のイメージ

CSSオフ時の表示は、下記のように各リンクがリストで表示されます。

CSSオフ時の表示

CSSのテクニック

CSSでの実装は三つパートに分かれています。

• コンテナ
• プログラム メニュー
• リンク メニュー

コンテナ

コンテナ箇所では、RGBaを使用したグラデーションや角丸などで外観のスタイルを設定します。

プログラム メニュー

左側のパネルの設定で、アイコンとプログラム名はそれぞれボーダーで区切られており、ボックスシャドウとグラデーションが美しく使用されています。

リンク メニュー

右側のパネルの設定で、プログラム箇所と同様にシンプルな実装となっていますが、マウスオーバー時のグラデーションのエフェクトが中央で分離されています。

対応ブラウザ

対応ブラウザはCSS3に対応したFx3.6+, Chrome, Safariで動作します。