備忘録：ブラウザ別CSSグラデーションのメモ
を元にして簡単なjQueryプラグインを書いてみました。ちょこざいなやつです。

jquery.xgraident.js

ご利用は自由かつ自己責任にて。
デモ用に作った物なので、かなりおおざっぱなブラウザ判別しかしてません。
（気が向いたら精査するかもしれません）

簡単な使い方

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xgradient.js"></script>

<script type="text/javascript">
    $("#GradientTest").xgradient( "y", "#ff99cc00", "#00663300" );
</script>

xgradient( direction, from_color, to_color )

direction

グラデーションの方向です。xは横、yは縦。（内部では「”y”かそうでないか」としか判断してないのは秘密です）

from_color

開始時の色。IEの書式にあわせた、#AARRGGBBの形式です。

to_color

終了時の色。from_colorと同様。

動作確認はIE6、IE7、IE8、Chrome5.0、Firefox3.6.3。

各ブラウザの見た目

$("#GradientTest").xgradient( "y", "#ff99cc00", "#00663300" );

IEのfilterによるグラデーションは、透明度をかますと他と表現が変わってしまう様子。
色計算の仕方が違ったりするのでしょうか。

こんな方法をとらずに皆同じ書き方出来るのは、
果たして何年後になるのでしょうか。

CSSのクロスブラウザグラデーションといえば、
こちらの記事が図解も載っていて非常に分かりやすいです。
Cross-Browser CSS Gradient
が、もう少し詳細の仕様を覚えておきたいと思ったので、ここにメモっておきます。

前提として、
中間のカラーストップを持たないシンプルなグラデーションを縦横に展開
する事をこの記事でのゴールとしておきます。
IEのfilterで実現出来るのがそれくらいなので、そこにあわせる意味で。

IEの場合

Gradient Filter (A, ABBR, ACRONYM, …)

書式

filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=,StartColorStr=,EndColorStr=);

GradientType

グラデーションの方向を整数で指定します。0ならば縦方向、1ならば横方向に描画されます。

StartColorStr

グラデーションの開始時の色。アルファ値を含んだRGBで指定。例：#FF000000

EndColorStr

グラデーションの終了時の色。アルファ値を含んだRGB。例：#FF000000

例

filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=0,StartColorStr=#FF669900,EndColorStr=#FF336600);

色の指定の仕方があまり見慣れない形式ですが、
最初の二桁が透明度を、順にR値、G値、B値を示します。

Mozillaの場合

-moz-linear-gradient – MDC

書式

-moz-linear-gradient( [ || ,]? , [, ]* )

point, angle

グラデーションの方向をangleかpointのいずれかで指定します。
pointはleft,right,center,top,bottom等を用いて指定。
angleは三種の単位の中から選んで指定します。
cf)angle – MDC degが一番馴染み深いですね。

stop

カラーストップを指定。色の指定方法も複数あります。
cf)color value – MDC RGBか、RGBaが馴染み深いでしょうか。

linear（線形）ではなく、radial（放射）グラデーションを描写する為の
-moz-radial-gradientも用意されています。
-moz-radial-gradient – MDC
が、ここでは割愛。

例1(RGB/縦方向)：

background: -moz-linear-gradient(top, #669900, #336600);

例2(RGBa/横方向)：

background: -moz-linear-gradient(left, rgba(102,153,0,1), rgba(51,102,0,0.5));

グラデーションの方向は、縦ならtop、横ならleftを指定するのがシンプルで分かりやすいですね。
本旨とはズレますが、ここで2点指定すれば斜めのグラデーション等も勿論実現できます。

Webkitの場合

Safari CSS Reference: CSS Property Functions

Mozillaと違って、グラデーションのタイプを引数で指定します。
linear（線形）とradial（放射）から選択できますが、
タイプによって書式が異なるので、ここではlinearについてのみ書いておきます。

書式

-webkit-gradient(linear, , , from(), to()… )

start_point

グラデーションの開始位置。left, right, center, top, bottom等を用いて指定します。

end_point

グラデーションの終了位置。start_pointに同じ。

stop

カラーストップ。開始と終了はfrom()とto()で括る事で指定します。

Mozilla同様、start_pointとend_pointを弄れば斜めも可能ですね。
カラーストップも、RGB値の他にRGBaにも対応しています。

例

background: -webkit-gradient(linear,left top, right top, from(rgba(102,153,0,1)), to(rgba(51,102,0,0.5)));

と、こんな感じにまとめてみましたが…
正直いちいち書式覚えてられるかー！というのが本音ですね。
クロスブラウザ対応できるライブラリでも書いてみようと思います。