Webデザインに奥行きを: gradient.radial-gradient で表現できるグラデーション

CSS Miscellaneous: gradient.radial-gradient プログラミング解説

gradient.radial-gradient() は、円形のグラデーションを作成する CSS 関数です。背景やその他の要素に適用することで、滑らかな色合いや模様を作成することができます。

構文:

radial-gradient([shape] at [position], start-color, ..., end-color)

パラメータ:

• shape: グラデーションの形状 (省略可)
  • circle: 円形 (デフォルト)
  • ellipse: 楕円形
  • closest-side: 角から最も近い点までの距離に基づいて形状を決定
• position: グラデーションの中心点 (省略可)
  • center: 中央 (デフォルト)
  • top: 上
  • bottom: 下
  • left: 左
  • right: 右
  • [length]: 中心点から水平方向と垂直方向へのオフセット
• start-color: グラデーションの開始色
• ...: 中間色 (省略可)
• end-color: グラデーションの終了色

例:

background: radial-gradient(circle, red, yellow, green);

上記のコードは、赤から黄色、緑へと変化する円形のグラデーションを作成します。

詳細:

• gradient.radial-gradient() は、複数の色を指定することで、より複雑なグラデーションを作成することができます。
• position パラメータを使用して、グラデーションの中心点を調整することができます。
• shape パラメータを使用して、グラデーションの形状を調整することができます。
• background-size プロパティを使用して、グラデーションのサイズを調整することができます。

• gradient.radial-gradient() は、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、グラデーションが表示されない場合があります。

補足:

• 上記の解説は、基本的な内容のみを説明しています。より詳細な情報は、上記の参考資料を参照してください。
• gradient.radial-gradient() を使用して、さまざまなデザインを作成することができます。

CSS gradient.radial-gradient() サンプルコード

.element {
  background: radial-gradient(red, yellow, green);
}

楕円形グラデーション

.element {
  background: radial-gradient(ellipse, red, yellow, green);
}

角から最も近い点までの距離に基づいたグラデーション

.element {
  background: radial-gradient(closest-side, red, yellow, green);
}

角から最も遠い点までの距離に基づいたグラデーション

.element {
  background: radial-gradient(farthest-side, red, yellow, green);
}

中心点を調整したグラデーション

.element {
  background: radial-gradient(circle at top, red, yellow, green);
}

形状と中心点を調整したグラデーション

.element {
  background: radial-gradient(ellipse at bottom left, red, yellow, green);
}

中間色を追加したグラデーション

.element {
  background: radial-gradient(circle, red, orange, yellow, green);
}

サイズと位置を調整したグラデーション

.element {
  background: radial-gradient(circle, red, yellow, green);
  background-size: 200px;
  background-position: center right;
}

複数のグラデーションを組み合わせた例

.element {
  background: radial-gradient(circle, red, yellow, green),
              linear-gradient(to bottom, blue, purple);
}

アニメーションで変化するグラデーション

@keyframes gradient {
  from {
    background: radial-gradient(circle, red, yellow, green);
  }
  to {
    background: radial-gradient(circle, blue, purple, cyan);
  }
}

.element {
  animation: gradient 2s infinite;
}

• 上記のサンプルコードは、あくまでも参考です。さまざまなパラメータを組み合わせて、自分だけのオリジナルグラデーションを作成してみてください。

CSS gradient.radial-gradient() の代替方法

linear-gradient を使用して、擬似的な円形グラデーションを作成することができます。

.element {
  background: linear-gradient(to top, red 0%, yellow 50%, green 100%);
  border-radius: 50%;
}

SVG 画像を使用して、円形グラデーションを作成することができます。

<svg viewBox="0 0 100 100">
  <defs>
    <radialGradient id="gradient" cx="50" cy="50" r="50">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="yellow" />
      <stop offset="100%" stop-color="green" />
    </radialGradient>
  </defs>
  <circle cx="50" cy="50" r="50" fill="url(#gradient)" />
</svg>

Canvas を使用して、円形グラデーションを作成することができます。

<canvas width="100" height="100"></canvas>

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const gradient = ctx.createRadialGradient(50, 50, 50);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "green");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 100, 100);

それぞれの方法のメリットとデメリット:

• linear-gradient を使用する方法:
  • メリット: シンプルでコード量が少ない
  • デメリット: 複雑なグラデーションを作成するには不向き
• SVG 画像を使用する方法:
  • メリット: 複雑なグラデーションを作成できる
  • デメリット: コード量が多くなる
• Canvas を使用する方法:
  • メリット: 柔軟性が高い
  • デメリット: JavaScript の知識が必要