yasutaro-blog

linear-gradient()は線形グラデーションの効果をつけられます。(firefox)
safariやGoogle Chromeなどのwebkitの場合、gradient()になります。

それぞれ書式が違います。

linear-gradient()

（safariで見てください）

/* linear-gradient()の場合 */
-moz-linear-gradient(開始位置と角度,始めの色,途中の色,終わりの色);

<div style="width:500px;height:100px;background:-moz-linear-gradient(red,blue);"></div>

開始位置と角度は指定しない場合は上から下に向かってグラデーションします。

開始位置は「left」「center」「right」、「top」「center」「bottom」やパーセント（%）、pxなどで指定できます。
角度はdegで指定します。

左から「赤→青」

<div style="width:500px;height:100px;background:-moz-linear-gradient(left,red,blue);"></div>

右から「赤→青」

<div style="width:500px;height:100px;background:-moz-linear-gradient(right,red,blue);"></div>

下から「赤→青」

<div style="width:500px;height:100px;background:-moz-linear-gradient(bottom,red,blue);"></div>

左から「赤10%→青50%」

<div style="width:500px;height:100px;background:-moz-linear-gradient(left,red 10%,blue 50%);"></div>

左から「赤150px→青400px」

<div style="width:500px;height:100px;background:-moz-linear-gradient(left,red 150px,blue 400px);"></div>

左から「赤→青→黄色→緑」

<div style="width:500px;height:100px;background:-moz-linear-gradient(left,red,blue,yellow,green);"></div>

角度を付けて左から「赤→青→黄色→緑」

<div style="width:500px;height:100px;background:-moz-linear-gradient(left 45deg,red,blue,yellow,green);"></div>

-webkit-gradient()

（safariかchromeで見てください。）

/* gradient()の場合 */
-webkit-gradient(linear, 開始位置, 終わりの位置, from(始めの色), color-stop(位置, 途中の色), to(終わりの色));

<div style="width:500px;height:100px;background:-webkit-gradient(linear,left top, left bottom,from(red), to(blue)); "></div>

以下は先ほどのfirefoxと同様に表示されるソースです。
(pxは指定できないようなので、pxのは抜かします。)

左から「赤→青」

<div style="width:500px;height:100px;background:-webkit-gradient(linear,left top, right top,from(red), to(blue)); "></div>

右から「赤→青」

<div style="width:500px;height:100px;background:-webkit-gradient(linear,right top, left top,from(red), to(blue)); "></div>

下から「赤→青」

<div style="width:500px;height:100px;background:-webkit-gradient(linear,left bottom, left top,from(red), to(blue)); "></div>

左から「赤10%→青50%」（ちょっと違うかも）

<div style="width:500px;height:100px;background:-webkit-gradient(linear,left top, right top,from(red),color-stop(10%,red),color-stop(50%,blue),to(blue)); "></div>

左から「赤→青→黄色→緑」

<div style="width:500px;height:100px;background:-webkit-gradient(linear,left top, right top,from(red),color-stop(33%,blue),color-stop(66%,yellow),to(green)); "></div>

角度を付けて左から「赤→青→黄色→緑」
角度は自由に付けられないようです。左上から右下というようなやり方しかできないようです。
（まぁ普通は上から下のグラデーションしか使わないと思うしあまり問題はないかも。）

<div style="width:500px;height:100px;background:-webkit-gradient(linear,left bottom, right top,from(red),color-stop(33%,blue),color-stop(66%,yellow),to(green)); "></div>

応用編

線形グラデーションとbox-shadowとborder-radiusとtext-shadowの組み合わせです。
firefox、safari、chromeの3つで同じように見えるようになっています。
IEは対応していないのでborder-radiusだけがかかっている状態です。

<div style="text-align:center;width:150px;height:30px;background-color:#ff9933;background:-moz-linear-gradient(top,#ffb94b,#fedc80 12%,#ffc436 39%,#ff8502 45%,#ffb82f);background:-webkit-gradient(linear,left top,left bottom,from(#ffb94b),color-stop(12%,#fedc80),color-stop(39%,#ffc436),color-stop(45%,#ff8502),to(#ffb82f));border-radius:15px;border:1px solid #999;">
<span style="color:#fff;font-weight:bold;font-size:30px;text-shadow:1px 1px 0px #000">menu</span>
</div>

書くのに時間がかかりそうと思ってなかなか手を付けられず、
今回の記事を書くまで間が開いてしまいました＾＾；

円形のグラデーションは水曜日くらいまでにアップしたいと思います。