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

CSS3で放射状グラデーションを作成する方法

放射状グラデーション（Radial Gradient）とは、中心点から外側に向かって色が変化していくグラデーションのことです。CSSでは radial-gradient() 関数を使用し、色が切り替わる位置を示す「カラーストップ」を指定することで、自由な配色を実現できます。

形状はデフォルトで楕円（ellipse）に設定されていますが、circle を指定すれば正円のグラデーションに変更することも可能です。なお、放射状グラデーションを定義するには、最低でも2つのカラーストップを指定する必要があります。

radial-gradient の基本構文

background-image: radial-gradient(形状 サイズ at 位置, カラー1, カラー2, ...);

サンプルコード

以下は、CSSを使って放射状グラデーションを作成するコード例です。赤系・青系・緑系の3つのカラーストップを指定し、中心から外側へと色が変化するグラデーションを描画しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
    height: 200px;
    width: 200px;
    background-image: radial-gradient(
        rgb(255, 0, 106),
        rgb(2, 0, 128),
        rgb(0, 255, 42)
    );
}
</style>
</head>
<body>
<h1>Radial Gradient Example</h1>
<div id="radial"></div>
</body>
</html>

出力結果

上記のコードを実行すると、ピンクから濃い青、そして緑へと変化する放射状グラデーションが表示されます。

CSS3で放射状グラデーションを作成する方法

  1. 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));上記の例では、楕円形のグラデーションが黄緑色から赤、そして水色へと変化していきます。色はカンマで

  2. CSS3でキーフレームアニメーションを定義する方法

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームとは、アニメーションの途中の状態（中間ステップ）を制御するための仕組みです。開始時点と終了時点のスタイルを指定することで、その間の変化をブラウザが自動的に補間してくれます。以下に、CSS3でキーフレームを定義するコード例を示します。コード例<!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;