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

CSSのradial-gradient()を使って等間隔のカラーストップを持つ放射状グラデーションを作成する方法

CSSのradial-gradient()で等間隔のカラーストップを作成する

CSSのradial-gradient()関数を使用して、等間隔に配置されたカラーストップを持つ放射状グラデーションを作成するには、少なくとも2つのカラーストップを定義します。カラーストップとは、グラデーションのどの時点でどの色に変化するかを指定する値のことです。

カラーストップの位置（パーセントやピクセル）を明示的に指定しない場合、ブラウザは自動的に各色を均等な間隔で配置してくれます。これにより、手軽になめらかでバランスの取れた放射状グラデーションを実現できます。

基本構文

background: radial-gradient(色1, 色2, 色3, ...);

コード例

以下の例では、オレンジ・緑・黄色の3つのカラーストップを指定し、等間隔の放射状グラデーションを作成しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 100px;
            background: radial-gradient(orange, green, yellow);
         }
      </style>
   </head>
   <body>
      <h2>Radial Gradient</h2>
      <div id = "demo">Radial Gradients</div><br>
   </body>
</html>

コードのポイント

  • height: 100px; … グラデーションを表示する要素の高さを設定しています。
  • radial-gradient(orange, green, yellow); … 中心から外周に向かって、オレンジ→緑→黄色の順に色が変化します。
  • 位置の指定がないため、3つの色は自動的に等間隔で配置されます。

このように、カラーストップを追加するだけで、より多彩な色合いの放射状グラデーションを簡単に作成できます。デザインに奥行きや立体感を持たせたい場合にぜひ活用してみてください。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで複数のカラーストップを使用して線形グラデーションを作成する方法

    複数のカラーストップを使った線形グラデーションの基本CSSのlinear-gradient()関数では、カラーストップ（色の変化点）を複数指定することで、より豊かで滑らかなグラデーション表現が可能になります。カラーストップはカンマで区切って列挙するだけで、指定した方向に向かって順番に色が遷移していきます。基本的な書き方background-image: linear-gradient(方向, 色1, 色2, 色3, ...);方向にはto left、to right、to topなどのキーワードや、角度（例：45deg）を指定できます。位置（%やpx）を省略した場合、各色は自動的に均等な間隔で