|
★CSS3リファレンス
radial-gradient()関数は、円形グラデーションを指定する際に使用します。
linear-gradient()関数は、仕様ではbackground-imageプロパティや list-style-imageプロパティなど、 画像を扱うことのできるどのプロパティにも指定できる値とされています。 ただし、現在のところ、FirefoxなどのMozilla系ブラウザは、 グラデーションの指定を background-imageプロパティ、 および、backgroundプロパティの値としてのみサポートしています。
円形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色、 さらに、グラデーションの形状を定義することで作成されます。 radial-gradient()関数の書式は以下の通りです。
開始位置と角度を指定すると、グラデーションの方向を定義することができます。 開始位置は、left・center・right、top・center・bottomのキーワード、パーセンテージ、pxなどの単位を付けた数値で指定します。 角度は、degなどの単位を付けた角度値で指定します。 開始位置と角度は省略可能ですが、その場合には初期値のcenterになります。
グラデーションの形状は、以下のキーワードから選択して指定します。指定を省略すると、初期値のellipseとなります。
- circle …… 正円
- ellipse …… 楕円（初期値）
サイズは、以下のキーワードから選択して指定します。指定を省略すると、初期値のcoverとなります。
- closest-side …… ボックスの一番近い辺に合わせる
- closest-corner …… ボックスの一番近い角に合わせる
- farthest-side …… ボックスの一番遠い辺に合わせる
- farthest-corner …… ボックスの一番遠い角に合わせる
- contain …… 指定範囲内に収める
- cover …… 指定範囲に合わせて覆う（初期値）
尚、SafariやGoogle Chromeなどのwebkit系ブラウザでは、以下の書式で指定するとradial-gradient()関数とほぼ同等の効果を実現できます。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1, p.sample2, p.sample3, p.sample4 {width:600px; 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(500px 10px, circle contain, red, yellow, green);
}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">円形グラデーションのサンプル１</p>
<p class="sample2">円形グラデーションのサンプル２</p>
<p class="sample3">円形グラデーションのサンプル３</p>
<p class="sample4">円形グラデーションのサンプル４</p>
</body>
</html>
ブラウザ上の表示
円形グラデーションのサンプル１
円形グラデーションのサンプル２
円形グラデーションのサンプル３
円形グラデーションのサンプル４
■ベンダープレフィックスを付けた場合の使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {width:600px; 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(500px 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">円形グラデーションのサンプル１</p>
<p class="prefix_sample2">円形グラデーションのサンプル２</p>
<p class="prefix_sample3">円形グラデーションのサンプル３</p>
<p class="prefix_sample4">円形グラデーションのサンプル４</p>
</body>
</html>
ブラウザ上の表示
円形グラデーションのサンプル１
円形グラデーションのサンプル２
円形グラデーションのサンプル３
円形グラデーションのサンプル４
|
