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

投稿:  著者:  読了時間:6分(本文:約2,900文字)


はじめまして、秋葉秀樹です。残暑厳しい夏も終わろうとしていますが、クリエイターのみなさん、がんばってますか〜?

連載第一回目は、私のパーソナル・ワークとして作ってみましたCSS3のグラデーションのコードを簡単に生成してくれる便利なWebアプリをご紹介するとともに、プログラムなしで「うにっ」とアニメーションするCSS3のtransitionプロパティを勉強して、こ〜んなナビゲーションを作ってみよう! を。



●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すら効きません。

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