明日もデザインで食べていこう！［01］CSS3グラデーションのソースを生成する「Grad? Gradient!」の紹介
── 秋葉秀樹 ──

●CSS3のグラデーションのコードを簡単に生成してくれる便利なWebアプリ

下記のコードをみてください。

background: -webkit-gradient(linear, left top, left bottom,color-stop(0, #d5def6), color-stop(1, #ff0000));
background: -moz-linear-gradient(top,#d5def6 0%, #ff0000 100%);

CSS3ではグラデーションが描けるようになります。
ただし、グラデーションをコードで書くと、カラーの情報と位置をそれぞれ記述しないといけないのと、ブラウザのレンダリングエンジンによって、グラデーションの書き方が違うという、とても大変というよりやる気を損ねるハードルが......これは大変です！
Safari, Chrome, Firefoxに適用させるとしたら2つも書かないといけません。しかも指定方法が違います。

で、「グラデーションだけでも直感的に書き出しが出来たらいいのになあ......」と考えて、何気なく試していくうちに今回ご紹介のサービス「Grad? Gradient!」が出来たので公開しました。（自己責任で使ってくださいね）

▼CSS3のグラデーションのコードを簡単に生成してくれるサイト
「Grad? Gradient!-CSS3 GradientButton Generator-」
< http://akibahideki.com/css3gradient/
>

［機能］
・グラデーションのスライダーは縦であって欲しい！　を実現（ボタンは縦グラデーションが割と多いという理由で）
・基本的にCSS2を使いこなしている人対象、なのでpadding, margin, font-family, font-size, text-decorationプロパティなどは省略。むしろそ
んなのは自分で書こうよ！
・ボタンはあらかじめ完成サンプルを用意、一度イメージに近いボタンをクリックしてちょっと変更、が可能。
・グラデーションスライダーはPhotoshopやIllustratorのそれと同様、スライダー追加や削除が出来る。
・出来たコードをコピー＆ペースト、そのまま使えます。


●プログラム要らず！？　マウスオーバーでアニメーション拡大するボタン

▼サンプルファイル（hover時にCSS3だけで拡大するボタン）[case1-1]
< http://www.akibahideki.com/digicre/case_01/ex01.html
>

今度はマウスが乗った時の処理をしてみましょう！
今までのCSSではhover擬似要素が大活躍でしたが、今回もそれでいけます。今回のサンプル[case1-1]のソースコードを見てみましょう。CSSの記述の中に以下のようなものがあります。

transition: transform 0.1s ease-out;
-webkit-transition: -webkit-transform 0.1s ease-out;
-moz-transition: -moz-transform 0.1s ease-out;
-o-transition: -o-transform 0.1s ease-out;

まずこの役割からしっかりと理解しましょう。この「transition:」で、「時間によってどのような変化を与えるか」を設定します。そう、設定です。つまりこれだけでアニメーションするわけではありません。

transition: transform 0.1s ease-out;
0.1秒かけて減速しながら変形する、という意味になります。どう変形するかはここでは記述しません。
transformが「実行されたときに」transitionの設定通りに動きなさい、ということです。（単語が似てる......ややこしい）

なので「transition:」を設定しないで、transformのみの設定だと、アニメーションせず、表示された瞬間にすぐに変形（transform）状態が表示されてしまい、単なる画像の入れ替えのようになってしまいます。

hover時は、

transform:scale(1.25,1.25);
-webkit-transform:scale(1.25,1.25);
-moz-transform:scale(1.25,1.25);
-o-transform:scale(1.25,1.25);

と記述します。
transform:scale(1.25,1.25);
縦と横をそれぞれ1.25倍する、という意味です。

これで、transitionの設定通りの時間やタイミングで、scaleの縦と横の倍率を目標としたアニメーションができました。さらにscaleだけでなく、回転や移動といった動きも可能です。次回はそのあたりをもっと探っていきましょう。
それでは、次回、またお会いしましょう！！

●補足

▼注意！〜-webkit-transition、現行Firefox 3.6では動かない！〜
Firefox 3.6ではtransitionプロパティがサポートされていません。
よって現行バージョンのFirefoxで上記のサンプルを実行したら、hover時に一瞬で大きくなり、アニメーションはしません。さらにFirefox 4の開発バージョンであるブラウザ「MineField」でサンプルを実行したところ、筆者の環境では動作した、と思いきやクラッシュして終了します。まだもう少し不安定と言ったところでしょうか、是非開発には頑張ってもらいたいですね。

▼注意！ベンダープレフィックス-o-を使ってもOpera10.5ではアニメーションが全く効かない
Operaは10.6からアニメーション対応が可能です。10.5だとアニメーションどころか、scaleすら効きません。

【あきば・ひでき】[email protected]
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。
Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。