css3によるグラデーション
対応ブラウザ:Firefox,Google Chrome,Safari
-moz-linear-gradient(方向, 開始色, 終了色); /*Firefox*/
-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色)); /*Google Chrome,Safari*/
参考サイト:http://www.css-lecture.com/log/css3/css3-gradient.html
-上から下へのグラデーション指定-
background: -moz-linear-gradient(top, #fff, #3b9bba);
background: -webkit-gradient(linear, left top, left bottom,
from(#fff),
to(#3b9bba));
-左から右へのグラデーション指定-
background: -moz-linear-gradient(left, #fff, #3b9bba);
background: -webkit-gradient(linear, left top, right top,
from(#fff),
to(#3b9bba));
-グラデーションの透過-
background: -moz-linear-gradient(top,rgba(100,100,100,0.3), #3b9bba);
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(100,100,100,0.3)), /*rgb値,アルファ値を指定*/
to(#3b9bba));
-左上から右下へのグラデーション指定-
background: -moz-linear-gradient(left top,#690,#c30 25%,#960 50%,#099 75%,#3ee);
background: -webkit-gradient(linear,left top,right bottom,
from(#690),
color-stop(0.25, #c30),
color-stop(0.5, #960),
color-stop(0.75, #099),
to(#3ee));
-斜めのグラデーション指定(傾きにdegを使用)-
background: -moz-linear-gradient(left -45deg, #fff, #3b9bba); /*top -45degはtop leftと同じ*/
background: -webkit-gradient(linear, left top, right bottom,
from(#fff),
to(#3b9bba));
-ピクセルでのグラデーション指定-
background-image: -moz-linear-gradient(top, #fff, #3b9bba 800px);
background-image:-webkit-gradient(linear,
800 0, /*開始座標(X,Y)を指定*/
0 0, /*終了座標(X,Y)を指定*/
from(#fff),
to(#3b9bba));