radial-gradient()【放射状グラデーション】関数
repeating-radial-gradient()【放射状グラデーション リピート】関数
メモ 外部リンク 構文 例
メモ
- 放射状グラデーション 関数
- 関数の戻り値 (画像) を、background【背景】に指定すれば、背景が放射状グラデーション
- 2色のグラデーション:始点と終点の色を指定
- 3色以上のグラデーション:中間点の色を追加指定
- 関連
外部リンク
構文 (※記述方法)
構文 | 説明 | |
---|---|---|
radial-gradient | ( [ [ shape (最終形状) || size (形状サイズ) ] [ at 《position【位置】》 ]?, | at 《position【位置】》, ]? color-stop (カラーストップ) [ , color-stop (カラーストップ) ]+ ) | 最終形状・形状サイズ 始点の色 終点(中間点)の色 |
repeating-radial-gradient | ||
戻り値 | 《gradient【グラデーション画像】》 | background【背景】等に指定 |
shape (最終形状) | circle【円】 | ellipse【楕円】 (省略:size (形状サイズ)が《length【長さ】》の場合、circle【円】 その他の場合、ellipse【楕円】) | |
size (形状サイズ) | closest-corner【近い角】 | closest-side【近い辺】 | farthest-corner【遠い角】 | farthest-side【遠い辺】 | 《length【長さ】》 | [《length【長さ】》 | 《percentage【パーセンテージ】》] {2} | circle【円】の場合 ellipse【楕円】の場合 |
color-stop (カラーストップ) | 《color【色】》 [ 《percentage【パーセンテージ】》 | 《length【長さ】》 ]? | 色 位置 |
例
<style>
.ex1 { text-align: center; color: black; padding: 100px 10px; }
.exA1 { background: radial-gradient(circle, white, blue); }
.exA2 { background: radial-gradient(ellipse, white, blue); }
.exB1 { background: radial-gradient(circle 50px, white, blue); }
.exB2 { background: radial-gradient(ellipse 100px 50px, white, blue); }
.exC1 { background: radial-gradient(circle closest-side, white, blue); }
.exC2 { background: radial-gradient(ellipse closest-side, white, blue); }
.exD1 { background: radial-gradient(circle at top left, white, blue); }
.exD2 { background: radial-gradient(ellipse at bottom right, white, blue); }
.exE1 { background: radial-gradient(circle closest-side, white, blue 20%); }
.exE2 { background: radial-gradient(ellipse closest-side, white, blue 20%); }
.exF1 { background: radial-gradient(circle, white, blue, yellow); }
.exF2 { background: radial-gradient(ellipse, white, blue, yellow); }
.exG1 { background: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet); }
.exG2 { background: radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet); }
</style>
<p class="ex1 exA1">(exA1) radial-gradient(circle, white, blue)</p>
<p class="ex1 exA2">(exA2) radial-gradient(ellipse, white, blue)</p>
<p class="ex1 exB1">(exB1) radial-gradient(circle 50px, white, blue)</p>
<p class="ex1 exB2">(exB2) radial-gradient(ellipse 100px 50px, white, blue)</p>
<p class="ex1 exC1">(exC1) radial-gradient(circle closest-side, white, blue)</p>
<p class="ex1 exC2">(exC2) radial-gradient(ellipse closest-side, white, blue)</p>
<p class="ex1 exD1">(exD1) radial-gradient(circle at top left, white, blue)</p>
<p class="ex1 exD2">(exD2) radial-gradient(ellipse at bottom right, white, blue)</p>
<p class="ex1 exE1">(exE1) radial-gradient(circle closest-side, white, blue 20%)</p>
<p class="ex1 exE2">(exE2) radial-gradient(ellipse closest-side, white, blue 20%)</p>
<p class="ex1 exF1">(exF1) radial-gradient(circle, white, blue, yellow)</p>
<p class="ex1 exF2">(exF2) radial-gradient(ellipse, white, blue, yellow)</p>
<p class="ex1 exG1">(exG1) radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet)</p>
<p class="ex1 exG2">(exG2) radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet)</p>
(exA1) radial-gradient(circle, white, blue)
(exA2) radial-gradient(ellipse, white, blue)
(exB1) radial-gradient(circle 50px, white, blue)
(exB2) radial-gradient(ellipse 100px 50px, white, blue)
(exC1) radial-gradient(circle closest-side, white, blue)
(exC2) radial-gradient(ellipse closest-side, white, blue)
(exD1) radial-gradient(circle at top left, white, blue)
(exD2) radial-gradient(ellipse at bottom right, white, blue)
(exE1) radial-gradient(circle closest-side, white, blue 20%)
(exE2) radial-gradient(ellipse closest-side, white, blue 20%)
(exF1) radial-gradient(circle, white, blue, yellow)
(exF2) radial-gradient(ellipse, white, blue, yellow)
(exG1) radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet)
(exG2) radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet)
<style>
.ex2 { text-align: center; color: black; padding: 100px 10px; }
.exRA1 { background: repeating-radial-gradient(circle, white, blue 20%); }
.exRA2 { background: repeating-radial-gradient(ellipse, white, blue 20%); }
.exRB1 { background: repeating-radial-gradient(circle 50px, white, blue); }
.exRB2 { background: repeating-radial-gradient(ellipse 100px 50px, white, blue); }
.exRC1 { background: repeating-radial-gradient(circle closest-side, white, blue); }
.exRC2 { background: repeating-radial-gradient(ellipse closest-side, white, blue 20%); }
.exRD1 { background: repeating-radial-gradient(circle at top left, white, blue 20%); }
.exRD2 { background: repeating-radial-gradient(ellipse at bottom right, white, blue 20%); }
.exRE1 { background: repeating-radial-gradient(circle closest-side, white, blue 20%); }
.exRE2 { background: repeating-radial-gradient(ellipse closest-side, white, blue 20%); }
.exRF1 { background: repeating-radial-gradient(circle, white, blue, yellow 20%); }
.exRF2 { background: repeating-radial-gradient(ellipse, white, blue, yellow 20%); }
.exRG1 { background: repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%); }
.exRG2 { background: repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%); }
</style>
<p class="ex2 exRA1">(exRA1) repeating-radial-gradient(circle, white, blue 20%)</p>
<p class="ex2 exRA2">(exRA2) repeating-radial-gradient(ellipse, white, blue 20%)</p>
<p class="ex2 exRB1">(exRB1) repeating-radial-gradient(circle 50px, white, blue)</p>
<p class="ex2 exRB2">(exRB2) repeating-radial-gradient(ellipse 100px 50px, white, blue)</p>
<p class="ex2 exRC1">(exRC1) repeating-radial-gradient(circle closest-side, white, blue)</p>
<p class="ex2 exRC2">(exRC2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)</p>
<p class="ex2 exRD1">(exRD1) repeating-radial-gradient(circle at top left, white, blue 20%)</p>
<p class="ex2 exRD2">(exRD2) repeating-radial-gradient(ellipse at bottom right, white, blue 20%)</p>
<p class="ex2 exRE1">(exRE1) repeating-radial-gradient(circle closest-side, white, blue 20%)</p>
<p class="ex2 exRE2">(exRE2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)</p>
<p class="ex2 exRF1">(exRF1) repeating-radial-gradient(circle, white, blue, yellow 20%)</p>
<p class="ex2 exRF2">(exRF2) repeating-radial-gradient(ellipse, white, blue, yellow 20%)</p>
<p class="ex2 exRG1">(exRG1) repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%)</p>
<p class="ex2 exRG2">(exRG2) repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%)</p>
(exRA1) repeating-radial-gradient(circle, white, blue 20%)
(exRA2) repeating-radial-gradient(ellipse, white, blue 20%)
(exRB1) repeating-radial-gradient(circle 50px, white, blue)
(exRB2) repeating-radial-gradient(ellipse 100px 50px, white, blue)
(exRC1) repeating-radial-gradient(circle closest-side, white, blue)
(exRC2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)
(exRD1) repeating-radial-gradient(circle at top left, white, blue 20%)
(exRD2) repeating-radial-gradient(ellipse at bottom right, white, blue 20%)
(exRE1) repeating-radial-gradient(circle closest-side, white, blue 20%)
(exRE2) repeating-radial-gradient(ellipse closest-side, white, blue 20%)
(exRF1) repeating-radial-gradient(circle, white, blue, yellow 20%)
(exRF2) repeating-radial-gradient(ellipse, white, blue, yellow 20%)
(exRG1) repeating-radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet 20%)
(exRG2) repeating-radial-gradient(ellipse, red, orange, yellow, green, blue, indigo, violet 20%)