-moz-linear-gradient で遊んでみた。

css

追記

該当の記事は間違っているわけではなく旧仕様のようです。beta2以降の仕様は当エントリーに書いたとおり。（現状のCSS3仕様に準拠したという事かと思われます。）
参考： https://bugzilla.mozilla.org/show_bug.cgi?id=513395

ここから本文

↓の記事がなぜかもやもやしてたの(neotagの勘違いです)で、遊んでみた。
http://ascii.jp/elem/000/000/474/474810/index-3.html
※Fx3.6専用


これ動かないんじゃない？と思って試したらやっぱり動かない。何と混同しちゃったのかな。(間違ってません。古いだけでした。)

/*mozilla 3.6+ グラデーション　マスク*/
background-image: -moz-linear-gradient(
                      top, bottom,　/*上から下にグラデーション*/
                      from(rgba(255, 255, 255, .2)), /*透明度 80%*/
                      color-stop(10%, rgba(255, 255, 255, .3)),
                          /*上から10%に透明度 70%*/
                      to(rgba(255, 255, 255, .4)));/*透明度 60%*/


で、たぶん正しくはこう。これで意図通りだと思う。

background-image: -moz-linear-gradient(
                      top, 
                      rgba(255, 255, 255, 0.2),
                      rgba(255, 255, 255, 0.3) 10%,
                      rgba(255, 255, 255, 0.4));

demo

http://neotag.net/lab/sample/-moz-linear-gradient-sample1.html

参考

ちなみにcolor-stopの描画はSVGの Linear Gradientの規則と同じらしい。

さて、トラックバックないしどうしようかな。調べればすぐ分かる事だろうしこのままでいいかな。