トップページ  > CSS3  > radial-gradient()

★CSS3リファレンス

radial-gradient() …… 円形グラデーションを指定する
Firefox3(-moz-)Firefox4(-moz-) Google Chrome2(-webkit-)Google Chrome3(-webkit-)Google Chrome4(-webkit-)Google Chrome5(-webkit-)Google Chrome6(-webkit-) Safari4(-webkit-)Safari5(-webkit-)

radial-gradient()関数は、円形グラデーションを指定する際に使用します。

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

円形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色、 さらに、グラデーションの形状を定義することで作成されます。 radial-gradient()関数の書式は以下の通りです。

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

開始位置と角度を指定すると、グラデーションの方向を定義することができます。 開始位置は、left・center・right、top・center・bottomのキーワード、パーセンテージ、pxなどの単位を付けた数値で指定します。 角度は、degなどの単位を付けた角度値で指定します。 開始位置と角度は省略可能ですが、その場合には初期値のcenterになります。

グラデーションの形状は、以下のキーワードから選択して指定します。指定を省略すると、初期値のellipseとなります。

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

尚、SafariやGoogle Chromeなどのwebkit系ブラウザでは、以下の書式で指定するとradial-gradient()関数とほぼ同等の効果を実現できます。

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

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: radial-gradient(yellow, green);
}
p.sample2 {
background: radial-gradient(bottom left, farthest-side, red, yellow, green);
}
p.sample3 {
background: radial-gradient(top right, circle, red 50px, yellow 100px, rgba(255,255,255,0) 100px);
}
p.sample4 {
background: radial-gradient(300px 10px, circle contain, red, yellow, green);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">円形グラデーションのサンプル1</p>
<p class="sample2">円形グラデーションのサンプル2</p>
<p class="sample3">円形グラデーションのサンプル3</p>
<p class="sample4">円形グラデーションのサンプル4</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

円形グラデーションのサンプル1

円形グラデーションのサンプル2

円形グラデーションのサンプル3

円形グラデーションのサンプル4

■ベンダープレフィックスを付けた場合の使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-radial-gradient(yellow, green);
background: -webkit-gradient(radial, center center, 20, center center, 100, from(yellow), to(green));
}
p.prefix_sample2 {
background: -moz-radial-gradient(bottom left, farthest-side, red, yellow, green);
background: -webkit-gradient(radial, left bottom, 0, left bottom, 300, from(red), color-stop(50%, yellow), to(green));
}
p.prefix_sample3 {
background: -moz-radial-gradient(top right, circle, red 50px, yellow 100px, rgba(255,255,255,0) 100px);
background: -webkit-gradient(radial, right top, 0, right top, 500, from(red), color-stop(20%, yellow), color-stop(20%, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
}
p.prefix_sample4 {
background: -moz-radial-gradient(300px 10px, circle contain, red, yellow, green);
background: -webkit-gradient(radial, 500 10, 0, 500 10, 10, from(red), color-stop(50%, yellow), to(green));
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="prefix_sample1">円形グラデーションのサンプル1</p>
<p class="prefix_sample2">円形グラデーションのサンプル2</p>
<p class="prefix_sample3">円形グラデーションのサンプル3</p>
<p class="prefix_sample4">円形グラデーションのサンプル4</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

円形グラデーションのサンプル1

円形グラデーションのサンプル2

円形グラデーションのサンプル3

円形グラデーションのサンプル4

▲ページ先頭へ
トップページ  > CSS3  > radial-gradient()
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ