Tweet

Pocket

グラデーションの指定に関するCSS3のプロパティをご紹介します。

◆ linear-gradient
線形グラデーションを指定するプロパティです。

【書式】

linear-gradient([開始位置と角度],[開始色],[途中色],[終了色]);

開始位置は、left、center、right、top、center、bottomの何れかで指定するか、数値で指定します。 角度は、degなどの単位を付けた角度値で指定します。開始位置と角度は省略可能ですが、その場合には初期値のtopになります。
また、途中色は幾つも増やすことができます。

SafariやChromeなどのwebkit系ブラウザでは、以下の書式で指定します。

【書式（webkit）】

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

※color-stopの位置は、0.1から1の間の数値で指定します。

【使用例（CSS）】

p {
　　-webkit-gradient(linear,laft top,left bottom,from(#ff0000),color-stop(0.5,#00ff00),to(#0000ff));
　　background:-moz-linear-gradient(top 45deg,#ff0000,#00ff00,#0000ff);
　　background:linear-gradient(top 45deg,#ff0000,#00ff00,#0000ff);
　　}

◆ radial-gradient
円形グラデーションを指定するプロパティです。

【書式】

radial-gradient([開始位置と角度],[形状とサイズ],[開始色],[途中色],[終了色]);

開始位置と角度は省略可能ですが、その場合には初期値のcenterになります。
また、途中色は幾つも増やすことができます。

1. 形状は、以下の値から選択して指定します。指定を省略すると、初期値のellipseとなります。

circle → 正円
ellipse → 楕円（初期値）

1. サイズは、以下の値から選択して指定します。指定を省略すると、初期値のcoverとなります。

closest-side → ボックスの一番近い辺に合わせる
closest-corner → ボックスの一番近い角に合わせる
farthest-side → ボックスの一番遠い辺に合わせる
farthest-corner → ボックスの一番遠い角に合わせる
contain → 指定範囲内に収める
cover → 指定範囲に合わせて覆う（初期値）

※他の設定値の詳細はlinear-gradientと同様です。

SafariやChromeなどのwebkit系ブラウザでは、以下の書式で指定します。

【書式（webkit）】

-webkit-gradient(radial,開始位置,開始位置の半径,終了位置,終了位置の半径,from(開始色),color-stop(位置, 途中色),to(終了色));

※color-stopの位置は、%で指定します。

【使用例（CSS）】

p {
　　background:-webkit-gradient(radial,left top,0,left top,300,from(#ff0000),color-stop(50%,#00ff00),to(#0000ff));
　　background:-moz-radial-gradient(left top,circle closest-side,#ff0000,#00ff00,#0000ff);
　　background:radial-gradient(left top,circle closest-side,#ff0000,#00ff00,#0000ff);
　　}

仕様ではbackground-imageプロパティやlist-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされていますが、現在のところ、FirefoxなどのMozilla系ブラウザは、background-imageプロパティ、および、backgroundプロパティの値としてのみサポートしています。

色の指定は、rgb、rgba、色名を直接記述でも指定できます。

【対応ブラウザ】
FireFox3-4、Chrome2-6、Safari4-5