★CSS3リファレンス
repeating-radial-gradient() …… 繰り返しの円形グラデーションを指定する
広告
repeating-radial-gradient()関数は、繰り返しの円形グラデーションを指定する際に使用します。
■構文
repeating-radial-gradient(形状とサイズ at 中心位置, 開始色 位置, 途中色 位置, 終了色 位置);
構文は基本的に radial-gradient()関数と同じですが、 repeating-radial-gradient()関数では色の位置を省略せずに指定することで、グラデーションの繰り返し一回分の距離を（その計算結果としてボックス内における繰り返し回数を）制御してやる必要があるでしょう。
■値
- グラデーションの中心位置
- at に続けて left, center, rightや、top, center, bottom などの位置を表すキーワード、または、0%, 50%, 100% などの%値でグラデーションラインの中心位置を指定。初期値は center
- 形状
- circle（円）、ellipse（楕円）のいずれか。初期値は ellipse
- サイズ
- グラデーションのサイズを以下のキーワードで指定。初期値は farthest-corner
closest-side …… ボックスの最も近い辺がグラデーションの終了位置となる
farthest-side …… ボックスの最も遠い辺がグラデーションの終了位置となる
closest-corner …… ボックスの最も近いコーナーがグラデーションの終了位置となる
farthest-corner …… ボックスの最も遠いコーナーがグラデーションの終了位置となる（初期値）
- 開始色, 途中色, 終了色
- 開始色, 途中色, 終了色を指定。 必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。 例えば、red, yellow, skyblue と指定すれば均一に変化するグラデーションとなりますが、red 50px, yellow 70px, skyblue 100px などと指定すれば各色がどの位置から始まるかを指定できます。
repeating-radial-gradient()関数では、グラデーションの終了色と次の開始色がそのままつなげられます。 そのため、配色によってはグラデーションの境目で色が急激に変化してしまうかもしれません。 グラデーションの境目をなめらかにつなげるには、終了色と開始色を同じ色にするとよいでしょう。
以下の使用例の sample3 と sample4 では、グラデーションの境目をなめらかにつなげるために終了色と開始色を同じ色にしています。
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample1, p.sample2, p.sample3, p.sample4 {width:300px; height:100px;
}
p.sample1 {
background: repeating-radial-gradient(white 50%, gray);
}
p.sample2 {
background: repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.sample3 {
background: repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.sample4 {
background: repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
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>
↓↓↓
ブラウザ上の表示
円形グラデーション１
円形グラデーション２
円形グラデーション３
円形グラデーション４
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-repeating-radial-gradient(white 50%, gray);
background: -webkit-repeating-radial-gradient(white 50%, gray);
background: -ms-repeating-radial-gradient(white 50%, gray);
}
p.prefix_sample2 {
background: -moz-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -webkit-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
background: -ms-repeating-radial-gradient(ellipse farthest-side, #ff0000 20px, rgba(255,0,0,0) 40px);
}
p.prefix_sample3 {
background: -moz-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -webkit-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
background: -ms-repeating-radial-gradient(circle farthest-side, red 5px, orange 10px, yellow 15px, green 20px, blue 25px, indigo 30px, violet 35px, red 40px);
}
p.prefix_sample4 {
background: -moz-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -webkit-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
background: -ms-repeating-radial-gradient(circle at top left, pink 0px, white 20px, skyblue 40px, white 60px, pink 80px);
}
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>
↓↓↓
ブラウザ上の表示
円形グラデーション１
円形グラデーション２
円形グラデーション３
円形グラデーション４
■関連項目
linear-gradient()関数 …… 線形グラデーションを指定する
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ