CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのrepeating-radial-gradient()で放射状グラデーションを繰り返す方法

repeating-radial-gradient()関数とは

CSSで放射状グラデーションを繰り返し表示したい場合は、repeating-radial-gradient()関数を使用します。通常のradial-gradient()ではグラデーションが要素内に一度だけ描画されますが、この関数を使うと、指定したカラーストップを基準にグラデーションが自動的に繰り返され、同心円状の縞模様などを簡単に作成できます。

ボタンの装飾や背景パターンなど、さまざまなデザインに活用できる便利な関数です。以下のコードを実行して、実際の表示を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 300px;
            background: repeating-radial-gradient(green 20%, orange 40%, maroon 40%);
         }
      </style>
   </head>
   <body>
      <p>繰り返し放射状グラデーション</p>
      <div id = "demo"></div>
   </body>
</html>

コードの解説

この例では、高さ300pxのdiv要素に対して背景としてrepeating-radial-gradient()を指定しています。カラーストップは「green 20%（緑：0〜20%）」「orange 40%（オレンジ：20〜40%）」「maroon 40%（マルーン：40%〜）」となっています。

最後のカラーストップが40%で終了しているため、それ以降は同じグラデーションパターンが自動的に繰り返され、中心から外側へ向かって同心円状の模様が描画されます。パーセントの値を調整することで、縞の幅や色の変化のタイミングを自由にコントロールできます。

  1. CSS rgba()関数の使い方を解説！透明度付きの色指定方法と実例

    rgba()関数とはCSSのrgba()関数は、赤（Red）、緑（Green）、青（Blue）の3原色に加えて、アルファ（Alpha）チャンネルによる透明度を含めたRGBAカラーバリューを定義するための関数です。アルファ値は色の不透明度を表し、0.0〜1.0の範囲の数値で指定します。1.0が完全に不透明な状態、0.0が完全に透明な状態を意味します。基本的な構文は以下のとおりです。rgba(red, green, blue, alpha)red / green / blue：各色成分を0〜255の整数、またはパーセンテージで指定します。alpha：不透明度を0.0（完全に透明）〜1.0（完全に不

  2. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l