備忘録：ブラウザ別CSSグラデーションのメモ

2010年05月12日 00:28 （2013年10月14日 02:11 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

この記事の情報は古くなっています。
最新のブラウザ対応状況を確認してください。

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

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

IEの場合

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

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

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

-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
が、ここでは割愛。

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

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

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

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

-webkit-gradient(linear, , , 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)));

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

コメントを書く