on:2011年10月21日sponsorsアニメーションを伴ったテキストシャドウや半透明を利用して、ブラーのエフェクトを使ったナビゲーションを実装するCSS3のチュートリアルを紹介します。Transitions[ad#ad-2]7つのデモ7つのデモの実装7つのデモデモは7種類あり、共通するアイデアはホバーしている時に他のアイテムをブラーでぼんやりとさせ、そのアイテム自体を強調することです。IEは、IE9でまだテキストシャドウやアニメーションはサポートされていません。7つのデモの実装HTMLメニューはすべてリスト要素で実装しており、固定幅を指定します。href="#">Contact</a></li></ul>[ad#ad-2]CSS各デモごとに実装のポイントを紹介します。その前に、デモ全部の基本となるスタイルです。11番目のデモではメニューは最初にブラーで表示させるため、リンクエレメントに透明なカラーとホワイトのテキストシャドウを与えます。ease-in-out;}ホバー時には明確に表示させます。右に10pxスライドさせることで、このエフェクトをより効果的にしています。22番目のデモでは、メニューが最初に少し歪んでいます。これは「-12deg」で歪めており、RGBaを使用して半透明の状態にしています。ease-in-out;}ホバー時には歪みがなくなり、背景が透明になります。他のものはぼんやりとさせます。33番目のデモは、エレメントのサイズを変更させます。最初は縮小されており少しぼんやりしています。linear;}ホバー時にはサイズが大きくなると共に、くっきりします。44番目のデモは、半透明のブラックな背景に輝くようなオレンジのカラーをテキストに与えています。ここでは、線形のアニメーションを使っています。linear;}ホバー時にはくっきりし、他のものはより透明になります。55番目のデモは繊細なエフェクトです。テキストシャドウとフォントカラーにホワイトを使用し、少しぼんやりと表示させます。ease-in-out;}ホバー時にはテキストシャドウを1pxにし、くっきりさせています。1番目のデモと同様に右にスライドさせるのがポイントです。66番目のデモは、エレメントに半透明のホワイトの背景を与えています。ease-in-out;}メニューが一つのユニットに見えるよう、最初と最後に角丸を適用しています。15px;}ホバー時には透明にくっきりとさせ、他のものはぼんやりとさせます。7最後の7番目のデモでは、メニューのアイテムの幅と高さに対して半分の値になるようにサークルの半径を設定しています。ease-in-out;}まずは、ホバー時に背景がより透明になるようにします。rgba(0,0,0,0.2);}フォントサイズとリストエレメントの高さを調整します。66px;}最初は、エレメントは縮小され、ぼんやりと表示されます。linear;}ホバー時にはオリジナルのサイズになりくっきりと表示されます。