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

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));

サイズに指定できる値

グラデーションのサイズには、以下の4つのキーワードが使用できます。

  • farthest-corner（デフォルト値）：中心から、最も遠い角までの距離を基準にサイズが決まります。
  • closest-side：中心から、最も近い辺までの距離を基準にサイズが決まります。
  • closest-corner：中心から、最も近い角までの距離を基準にサイズが決まります。
  • farthest-side：中心から、最も遠い辺までの距離を基準にサイズが決まります。

また、キーワードの代わりに「40% 50px」のような具体的な数値で楕円の半径を直接指定することも可能です。

実装例

それでは、CSSを使って放射状グラデーションのサイズを設定する完全なコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
    height: 200px;
    width: 200px;
    background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32));
}
</style>
</head>
<body>
<h1>放射状グラデーションのサイズ指定サンプル</h1>
<div id="radial"></div>
</body>
</html>

表示結果

上記のコードを実行すると、中心を基準に横方向に40%、縦方向に50pxのサイズを持つ楕円形のグラデーションが描画されます。緑・水色・暗赤色の3色が滑らかに変化し、指定したサイズの範囲で美しい放射状の演出が実現できます。

このように radial-gradient() のサイズ指定を活用することで、ボタンのハイライトや光の表現など、さまざまなデザインに応用できます。

  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. CSSでグラデーションのカラーストップ位置を設定する方法

    CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。カラーストップの基本例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% );このように位置を明示的に指定すると、各色がその地点で完全に