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

CSS3の放射状グラデーション（radial-gradient）の実装方法

CSS3の放射状グラデーション（radial-gradient）は、指定した中心点から外側に向かって色が円形や楕円形に広がっていくグラデーション効果です。線形グラデーションが直線方向に色が変化するのに対し、放射状グラデーションは中心を起点として全方向へ展開されるため、ボタンや背景装飾などで立体感や奥行きを表現したい場面で活躍します。

radial-gradientの基本構文

基本的な書き方は以下のとおりです。括弧内に「色とその位置」をカンマ区切りで順に指定していきます。

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

サンプルコード

次のコードでは、赤（5%）→ 緑（15%）→ ピンク（60%）という順序で色が変化する放射状グラデーションを実装しています。古いブラウザにも対応できるよう、-webkit-、-o-、-moz- といったベンダープレフィックス付きの記述を併せて指定しています。

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

このコードをブラウザで実行すると、高さ100px・幅550pxの要素の中央から、赤から緑へ、さらにピンクへと滑らかに移り変わる円形のグラデーションが表示されます。

ポイント解説

  • 各パーセントの値は、中心からその色が完全に現れるまでの距離を表しています。
  • 標準仕様である radial-gradient は必ず最後に記述しましょう。これにより、最新ブラウザではプレフィックス付きの記述が上書きされ、正しく表示されます。
  • 形状（circle / ellipse）やサイズ（closest-side、farthest-corner など）を指定すれば、グラデーションの広がり方をより細かく制御することも可能です。
  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));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで