css,javascript,actionscriptを中心に勉強したことをまとめるブログ

backgroundでgradientを使うことで線形のグラデーションをつけることができます。

gradientとは

backgroundに指定することで、ボックスの背景色を線形にグラデーションさせることができます。

記述方法

gradientはブラウザによって記述方法が変わりますので注意が必要です。

background: -moz-linear-gradient(設定); //mozilla
background: -webkit-gradient(設定); //webkit

この場合、backgroundの値として記述していますが、扱いはbackground-imageになるようです。
従って、background-imageの値として記述もできます。

background-image: -moz-linear-gradient(設定); //mozilla
background-image: -webkit-gradient(設定); //webkit

グラデーションの設定はかっこの中に記述します。

background: -moz-linear-gradient(top, #eee, #999); //mozilla
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999)); //webkit

mozilla系ブラウザの場合

-moz-linear-gradient(方向, 開始色, 終了色)

mozilla系ブラウザの場合、一つ目にはグラデーションの方向、2つ目と3つ目に開始と終了の色を記述します。
方向は、

top →　上から下
left →　左から右
left top →　左上から右下
・
・

というように記述します。

色はrgbを使っても記述できます。
また、この場合一緒にアルファ値（透明度）も設定できます。

-moz-linear-gradient( top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0),)

アルファ値は0～1.0で指定します。（0が透明、1.0が不透明）
グラデーションに色を追加したい場合は、色数を増やします。

-moz-linear-gradient(top, #eee, #c00, #999)

このままだと自動的に開始点と終了点の真ん中に色が置かれます。
色を置く位置を指定したい場合は色指定の後ろに位置指定の数値を記述します。

-moz-linear-gradient(top, #eee, #c00　20%, #999)

webkit系ブラウザの場合

-webkit-gradient(linear, 開始地点, 終了地点, from(開始色), to(終了色));

webkit系ブラウザの場合は少し長くなってしまいます。
一つ目はグラデーションの種類です。（線形なので、linear）
mozillaのほうは開始点だけだったのに対して、webkitは開始点と終了点も記述します。

色は同じようにrgbaでも指定できます。

-webkit-gradient( linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0)),)

ちょっと長くなってきましたね・・・。
グラデーションの色を追加する場合はcolor-stopを使います。

-webkit-gradient( linear, left top, left bottom,
　　　　　　　　from(rgba(255, 255, 255, 0)),
　　　　　　　　color-stop(0.5, rgba(255, 255, 255, 0)),
　　　　　　　　color-stop(0.5, rgba(255, 255, 255, 0)),
　　　　　　　　to(rgba(255, 255, 255, 0)),)

このように色指定の前に開始点から終了点までのどの地点に色を置くかを指定できます。

主な対応ブラウザ

• FireFox3.6～
• Google Chrome
• Safari 4～

サンプルコード

CSS3サンプル / gradient

その他

mozilla系のブラウザでは

-moz-radial-gradient

という円のグラデーションも使うことができるようです。
詳しくはこちらにて。

-moz-radial-gradient

参考サイト

CSSグラデーションのちょっとしたテクニック #1 - hail2u.net
CSS3のグラデーションを試してみる - A Day in the Life
CSS3だけで丸いボタンを作る方法 - CSS-EBLOG