[CSS]CSS3を使って実装する、かわいらしいLavaLampナビゲーション
Post on:2010年2月16日
LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。
CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエフェクトを実装するチュートリアルをINSIC DESIGNSから紹介します。
![デモのキャプチャ](/wp-content/uploads-2010/2010021604.png)
Creating a Fancy menu using CSS3 and jQuery
デモページ
デモはCSS3に対応したChrome、Safariで動作をします。
![デモのキャプチャ](/wp-content/uploads-2010/2010021605.png)
Chromeでのキャプチャ
ナビゲーションはリスト要素で実装されており、画像を使用していないためカラーの変更もスタイルシートで簡単に行えます。
![デモのキャプチャ](/wp-content/uploads-2010/2010021606.png)
カラーの変更はスタイルシートで
ナビゲーションのアクティブ時の処理にはjQueryが使用されています。
sponsors