[JS]CSSスプライトをアニメーションで変更するチュートリアル
Post on:2010年3月16日
Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。

Creative Button Animations with Sprites and JQuery
デモページ
デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。
エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。

エキスパート モード
上記で使用している画像の作成方法は、Part1を参照ください。
Part 1:Photoshopで画像作成編
sponsors