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

CSSでグラデーションのカラーストップ位置を設定する方法

CSSのグラデーションでは、各色が切り替わる位置(カラーストップ)をパーセンテージまたは絶対的な長さで指定できます。これにより、色の遷移を均等ではなく自由にコントロールすることが可能です。

カラーストップの基本

例えば、linear-gradient()関数でカラーストップの位置を指定する場合、以下のように記述します。

background-image: linear-gradient(
    rgb(61, 255, 2) 40%,
    rgb(0, 174, 255) 80%,
    rgb(255, 29, 29) 20%
);

このように位置を明示的に指定すると、各色がその地点で完全に表示され、隣接する色との間で滑らかにブレンドされます。

サンプルコード

以下は、CSSを使って線形グラデーションにカラーストップの位置を設定した実際のコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.even {
    height: 100px;
    background-image: linear-gradient(
        rgb(61, 255, 2),
        rgb(0, 174, 255),
        rgb(255, 29, 29)
    );
}
.uneven {
    height: 100px;
    background-image: linear-gradient(
        rgb(61, 255, 2) 40%,
        rgb(0, 174, 255) 80%,
        rgb(255, 29, 29) 20%
    );
}
</style>
</head>
<body>
<h1>線形グラデーションのカラーストップ位置</h1>
<h3>均等に配置した場合</h3>
<div class="even"></div>
<h3>不均等に配置した場合</h3>
<div class="uneven"></div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

  • .evenクラス: 位置を指定していないため、3つの色が要素内で均等に配置され、滑らかなグラデーションが表示されます。
  • .unevenクラス: 各色に40%、80%、20%という位置が指定されているため、色の切り替わりタイミングが変化し、不均等なグラデーションになります。

このようにカラーストップの位置を調整することで、デザインに合わせた柔軟なグラデーション表現が実現できます。位置の指定には「%」のほか、「px」などの絶対単位も使用できるため、レスポンシブ対応か固定レイアウトかといった要件に応じて使い分けるとよいでしょう。

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