説明 | radial-gradient |
サンプル | circle(円)を使用(2色) |
circle(円)を使用(3色) | |
ellipse(楕円)を使用 | |
closest-corner(円の中心から最も近い角) | |
farthest-corner(円の中心からも最も遠い角) | |
circle(円)で色の停止の位置を追加 | |
グラデーションを繰り返す(repeating-radial-gradient) |
radial-gradient
radial-gradientは、円のグラデーションを表示します。
radial-gradient (形状 サイズ 円の中心の位置,最初の色 位置,途中の色 位置,終了の色 位置) |
形状から円の中心の位置までは半角スペースで区切ります。
値は以下を設定します。
形状 | circle(円)またはellipse(楕円)を指定します。デフォルトはellipse(楕円)。 |
サイズ | 以下のいずれかを指定します。 1.キーワードを指定 2.数値+単位または数値+%を指定(数値+%は、ellipseのみ) 省略した場合は、farthest-cornerになります。 |
1.キーワードの場合以下のいずれかを指定します。 closest-side・・・円の中心から最も近い縦と横の辺に接する closest-corner・・・円の中心から最も近い角に接する farthest-side・・・円の中心から最も遠い縦と横の辺に接する farthest-corner・・・円の中心からも最も遠い角に接する |
|
2.数値+単位または数値+%を指定 circleの場合、数値+単位で1つ指定します。→半径になります。例: 30px ellipseの場合、数値+単位または数値+%で2つ指定します。→最初が水平の値で次が垂直の値になります。例:30px 70px |
|
円の中心の位置 | 以下のいずれかを指定します。 1.キーワードを指定 2.at 数値+単位 数値+単位を指定 3.at 数値+% 数値+%を指定 省略した場合は、centerになります。 |
1.以下のキーワードを指定します。 at top・・・上の辺の真ん中に中心がきます。 at right・・・右辺の真ん中に中心がきます。 at bottom・・・下の辺の真ん中に中心がきます。 at left・・・左辺の真ん中に中心がきます。 at center・・・中央に中心がきます。 at top right・・・右上の角に中心がきます。 at bottom right・・・右下の角に中心がきます。 at bottom left・・・左下の角に中心がきます。 at top left・・・左上の角に中心がきます。 |
|
2.at 数値+単位 数値+単位を指定します。 最初の値は水平の位置で、次の値は垂直の位置になります。 (例:at 10px 10px) |
|
3.at 数値+% 数値+%を指定します。 %は領域の幅と高さでの割合になります。 最初の値は水平の位置で、次の値は垂直の位置になります。 (例:at 10% 10%) |
|
最初の色 位置 | 位置は省略可能。数値% |
途中の色 位置 | 途中の色は、複数指定可能。途中の色自体の省略も可能。 位置は省略可能。数値% |
終了の色 位置 | 位置は省略可能。数値% |
circle(円)を使用(2色)
offset-x
<style>
.test1 {
background: radial-gradient(circle, DeepPink, Gold);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
circle(円)を使用(3色)
offset-x
<style>
.test1 {
background: radial-gradient(circle, DeepPink, Gold, Aqua);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
ellipse(楕円)を使用
offset-x
<style>
.test1 {
background: radial-gradient(ellipse, DeepPink, Gold);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
closest-corner(円の中心から最も近い角)
offset-x
<style>
.test1 {
background: radial-gradient(closest-corner at 20px 20px, DeepPink, Gold);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
farthest-corner(円の中心からも最も遠い角)
offset-x
<style>
.test1 {
background: radial-gradient(farthest-corner at 20px 20px, DeepPink, Gold);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
circle(円)で色の停止の位置を追加
offset-x
<style>
.test1 {
background: radial-gradient(circle, DeepPink 5%, Gold 10%, Aqua 80%);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
赤と黄の領域が狭くなっています。
グラデーションを繰り返す(repeating-radial-gradient)
offset-x
<style>
.test1 {
background: repeating-radial-gradient(circle, DeepPink 5%, Gold 10%, Aqua 15%);
width: 300px;
height: 50px;
}
</style>
<div class="test1">offset-x</div>
repeating-radial-gradientを使用します。
関連の記事