CSS3のグラデーションを試してみる
Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。
書式ですが、長くなりますがプロパティを一つ一つ追加して説明していくことにします。
線形グラデーションはlinearで指定します。Safari/Google Chrome用（以下webkit）は-webkit、Firefox3.6用（以下mozilla）は-mozとお決まりの書式になります。
background: -moz-linear-gradient();
background: -webkit-gradient(linear);
グラデーションの開始位置と終了位置を追加します。上から下へのグラデーションの場合は次のような記述になります。webkitは2点を指定しますが、mozillaは開始点1点の指定になります。
background: -moz-linear-gradient(top);
background: -webkit-gradient(linear, left top, left bottom);
左から右は次の通り。
background: -moz-linear-gradient(left);
background: -webkit-gradient(linear, left top, right top);
斜め方向へのグラデーションは次のような記述になります。
background: -moz-linear-gradient(left top);
background: -webkit-gradient(linear, left top, right bottom);
mozillaは角度（degree）で指定することも出来ます。
background: -moz-linear-gradient(left 20deg);
色指定を追加します。webkitの場合、2色はfrom(色)からto(色)で指定します。mozillaの場合はfromやtoは不要です。
例えば上から下へ#eee→#999のようなグラデーションでレンダリングするには次のような書式になります。
background: -moz-linear-gradient(top, #eee, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
色指定はカラーコード以外にもrgbで指定することが出来ます。rgbで指定した場合はアルファ値を指定することが出来ます。(rgba)
background: -moz-linear-gradient(top, rgba(238, 238, 238, 0.8), rgba(158, 158, 158, 1));
background: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(238, 238, 238, 0.8)),
to(rgba(158, 158, 158, 1)));
webkitの場合、from to以外にcolor-stopと言うプロパティも用意されています。color-stopを利用する場合は3色以上のグラデーションが利用出来るようになります。color-stopプロパティはcolor-stop(位置, 色)のように位置を指定しなければなりません。
mozillaの場合、3色以上のグラデーションの場合でも、そのままカンマ区切りで色の指定が出来ます。
例えば上から下へ#eee→#999→#eeeのようなグラデーションでレンダリングするには次のような書式になります。
background: -moz-linear-gradient(top, #eee, #999, #eee);
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(50%, #999),
color-stop(100%, #eee));
mozillaの場合は位置指定しない場合、真ん中の色を50%の位置でレンダリングしてくれますが、任意の位置を指定することも当然出来ます。例えば真ん中の色#999を20%の位置に持っていくには次のような書式になります。
background: -moz-linear-gradient(top, #eee, #999 20%, #eee),url(img/bg_slash01.gif) repeat 0 0;
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee)),
url(img/bg_slash01.gif) repeat 0 0;
背景画像とグラデーションを重ねてレンダリングすることも出来ます。その場合は色をrgbaで指定し、任意の色のアルファ値を指定します。
background: -moz-linear-gradient(top, rgba(238, 238, 238, 0.8), rgba(158, 158, 158, 1));
background: -webkit-gradient(
linear,
left top, left bottom,
from(rgba(238, 238, 238, 0.8)),
to(rgba(158, 158, 158, 1)));
webkitは少々記述が長くなってしまいますね。
まとめ
/* mozilla */
background: -moz-linear-gradient(開始点, 色 位置, 色 位置), url(hoge.gif) repeat 0 0;
/* webkit */
background: -webkit-gradient(
linear,
開始点, 終了点,
color-stop(位置, 色),
color-stop(位置, 色),
color-stop(位置, 色)),
url(hoge.gif) repeat 0 0;
デモページを用意しました。Firefox3.6, Safari4, Google Chromeで閲覧してみてください。
