Mach3.laBlog

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

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

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

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)));

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

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*