TOP  >  CSS・スタイルシートTIPS  >  CSS3グラデーション背景の書き方

2010年05月25日 17:58

CSS3グラデーション背景の書き方

CSSでグラデーション背景を指定する場合の書き方には2種類あり、
W3C CSS3準拠のwebkit系(Safari, Chrome)とMozzilea系(Firefox)を
それぞれ指定します。(角丸の場合と同じ)
基礎的な書き方としては以下のような書き方になります。

Safari3など用のwebkit(W3C CSS3準拠)に対する記述
-webkit-gradient(linear, 開始する位置, 終了する位置, from(開始する色), to(#ff0)終了する色));
FirefoxなどMozilla系ブラウザに対する記述
-moz-linear-gradient(方向, 開始する色, 終了する色);

指定できる要素は『background』と『background-image』です。



グラデーションの開始・終了位置は「top」「left」などの位置指定とピクセルでの指定が可能です。
また『color-stop』という指定で間に色を追加したり、
『rgba()』という指定で透明度を指定することができます。

Mozilla系の場合、
topは「上から下」、leftは「左から右」、left topは「左上から右下」
のように表示されます。


上記の基礎的な指定でCSSによるグラデーション背景を表示すると以下のようになります。

上から下へのグラデーション
CSS3の上から下へのグラデーションです。
"background:-webkit-gradient
(linear,center top, center bottom, from(#0099CC), to(#ffffff));
background:-moz-linear-gradient(top, #0099CC, #ffffff);"
左から右へのグラデーション
CSS3の左から右へのグラデーションです。
"background:-webkit-gradient
((linear,left center,right center, from(#0099CC), to(#ffffff));
background:-moz-linear-gradient(left, #0099CC, #ffffff);"

TOP  >  CSS・スタイルシートTIPS  >  CSS3グラデーション背景の書き方




正当なCSSです!