on:2012年1月31日sponsorsjQueryなどのJavaScriptを使用せずに、フェードのアニメーションで画像が切り替わるギャラリーを実装するCSS3のチュートリアルを紹介します。各画像への#リンクも有効です。Sliderのデモ画像ギャラリーのナビゲーションは下部の丸いアイコンで、クリックするとフェードのアニメーションで画像が切り替わります。※IE9ではフェードのアニメーションはなしです。デモページギャラリーの各画像の#リンクにも対応しています。Sliderの実装HTMLHTMLは画像とナビゲーション(リスト要素)をdiv要素で内包します。href="#five"></a></li></ul></div>[ad#ad-2]CSSCSSは長いので、分けて紹介します。デモページ:ギャラリーのスタイルまずは、画像ギャラリーの見栄えです。「box-shadow」を使用し、両端にがふわりと浮かんだ感じにします。skew(10deg);}デモページ:ナビゲーションのスタイルナビゲーションのスタイルです。リスト要素のスタイルをリセットし、「box-shadow」「border-radius」を使いデザインします。#888;}デモページ:アニメーションのスタイル最後に、画像切り替え時のアニメーションです。デフォルトで不透明度を0にし、ターゲットがあたったら不透明度を1にし、フェードのアニメーションします。