radial-gradientとrepeating-radial-gradient

repeating-radial-gradient

線形グラデーションのlinear-gradientを繰り返すrepeating-linear-gradientがある(参考:linear-gradientとrepeating-linear-gradient)ように、放射状グラデーションのradial-gradientを繰り返すrepeating-radial-gradientプロパティも存在します。

repeating-linear-gradientと同じく、最後の色位置指定までを繰り返す形で埋め尽くします。

上サンプル{
 background: radial-gradient( at top left,coral , pink 20%);
}

下サンプル{
 background: repeating-radial-gradient( at top left,coral , pink 20%);
}
 
 

radial-gradientの場合、20%位置でグラデーションが終了し、残りは最後に指定した色での塗りつぶしになりますが、repeating-radial-gradinetの場合はグラデーションの繰り返しになります。

細かく指定すればradial-gradientでもかなり再現できます。

#{ 
 background: radial-gradient( at top left,coral,pink 20%,coral 20%,pink 40%,coral 40%,pink 60%,coral 60%,pink 80%,coral 80%,pink 100%) ;
}

repeating-radial-gradientプロパティの指定については、radial-gradientと同じですので、詳しくは「radial-gradient」をご確認ください。

下のサンプルはレコード盤をrepeating-radial-gradientで表現しています。
アニメーションについては「cssアニメーションの基本」をご参照ください。

See the Pen repeating-radial-gradient by Takashi Abe (@TakeshiAbe) on CodePen.

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(軽微なカスタムなら5,500円〜)

ご依頼・ご相談は「お問い合わせ・ご相談」より随時承ります。