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

CSS3のrepeating-radial-gradientで繰り返し放射状グラデーションを作る方法

CSS3では、repeating-radial-gradient() 関数を使うことで、色が繰り返される放射状グラデーションを簡単に作成できます。通常の放射状グラデーションは中心から外側に向かって一度だけ色が変化しますが、繰り返しタイプを指定すると、指定したカラーストップのパターンが自動的に反復され、縞模様や同心円状のデザイン表現が可能になります。

基本構文

repeating-radial-gradient() の書き方は以下のとおりです。

background: repeating-radial-gradient(開始色, 中間色 位置%, 終了色 位置%);

実装例

以下のコードを実行すると、青・黄・緑の3色が交互に繰り返される放射状グラデーションを確認できます。

<html>
<head>
  <style>
    #grad1 {
      height: 100px;
      width: 550px;
      background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
      background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
      background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
      background: repeating-radial-gradient(blue, yellow 10%, green 15%);
    }
  </style>
</head>
<body>
  <div id = "grad1"></div>
</body>
</html>

コードの解説

  • height / width：グラデーションを表示する要素の高さと幅を指定しています。
  • blue：中心（開始位置）の色を青に設定します。
  • yellow 10%：中心から10%の位置で黄色に遷移します。
  • green 15%：15%の位置で緑になり、ここまでのパターンが外側へ繰り返されます。

ベンダープレフィックスについて

サンプルコードでは、古いバージョンのブラウザ向けに -webkit-、-o-、-moz- といったベンダープレフィックス付きの記述も併記しています。現在の主要ブラウザ（Chrome、Firefox、Safari、Edgeなど）は標準の repeating-radial-gradient() に対応しているため、最新の環境だけであればプレフィックスなしの記述のみでも問題なく動作します。

活用シーン

この手法は、ストライプ模様の背景、ターゲット（的）のような同心円パターン、装飾的なボタンやバナーのデザインなど、さまざまな場面で活用できます。カラーストップの位置や色を調整することで、多彩なビジュアル表現をCSSだけで実現できるのが魅力です。

  1. CSSで放射状グラデーションのサイズを指定する方法

    CSSで放射状グラデーションのサイズを制御するには、radial-gradient() 関数を使用します。この関数は、背景画像として放射状グラデーションを定義するもので、第1引数にサイズ（形状と大きさ）を、その後に位置やカラーストップを指定します。基本的な書き方以下の例のように、関数の最初のパラメータとして希望するサイズを設定します。background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));サイズに指定できる値グラデーションのサイズには、以下

  2. CSSで放射状グラデーションの形状を設定する方法

    CSSで放射状グラデーションの形状を設定するには、radial-gradient()関数を使用します。この関数は、背景画像として放射状グラデーションを指定するためのもので、第1引数に希望する形状を指定します。指定できる形状は「ellipse」（楕円）と「circle」（円）の2種類です。以下のように記述します。background-image: radial-gradient(ellipse, rgb(217, 255, 0), rgb(255, 0, 0), rgb(14, 239, 255));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで