CSS3 グラデーションをつける gradient

グラデーションについては、まだ動作未確認な部分が多いです。

■ 線形グラデーション

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色)); 
-moz-linear-gradient(開始位置, 終了位置, 開始色, 途中色 位置, 終了色);

※色はrgba(Red, Green, Blue, Alpha)で指定する事で透明度を指定できる

	background: -moz-linear-gradient(
		top,
		#fcc800,
		#c70067 50% ,
		rgba(154,13,124,0.5)
    );
    background: -webkit-gradient(
		linear,
		50% 0%,
		50% 100%,
		from(#fcc800),
		color-stop( 0.5  , #c70067 ),
		to(rgba(154,13,124,0.5))
    );

■ 円形グラデーション

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色)); 
-moz-radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);

※色はrgba(Red, Green, Blue, Alpha)で指定する事で透明度を指定できる

	background: -moz-radial-gradient(
		50% 50%,
		circle,
		#fcc800,
		#c70067 50% ,
		#9a0d7c,
		rgba(154,13,124,0.5)
    );
    background: -webkit-gradient(
		radial,
		50% 50%,
		0,
		50% 50%,
		400,
		from(#fcc800),
		color-stop( 0.5  , #c70067 ),
		to(rgba(154,13,124,0.5))
    );

Tags: gradient