8.1 線形グラデーション (linear-gradient)
CSSのグラデーションは、2つ以上の色の間で滑らかな遷移を作ることができる。背景やボタン、その他の要素に視覚的な深さと魅力を加えるために使われる。CSSでは2つの基本的なタイプのグラデーションがある：線形 (linear-gradient) と放射状 (radial-gradient)。
線形グラデーションは、直線に沿った色の滑らかな遷移を作る。ラインの方向や色の遷移は正確に調整できる。
構文:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
どこで:
direction: グラデーションの方向。角度（例：45deg）またはキーワード（to right、to bottomなど）で指定できる。color-stop: グラデーションでの色とその位置を定義する
例 1: 単純な線形グラデーション
この例では、赤から青への線形グラデーションを作成します。右から左に遷移します:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red, blue);
}
例 2: 角度を持つ線形グラデーション
この例では、黄色から緑へのグラデーションが45度の角度で走行します:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(45deg, yellow, green);
}
例 3: 複数色の線形グラデーション
この例では、赤、黄色、緑、青の4色を上から下に滑らかに遷移するグラデーションを作成します:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to bottom, red, yellow, green, blue);
}
例 4: 制御点を持つ線形グラデーション
この例では、各色の正確な配置を決定する制御点を指定しています:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}
8.2 放射状グラデーション (radial-gradient)
放射状グラデーションは、中央または指定された点から色が滑らかに遷移します。円や楕円で拡張される。
構文:
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
どこで:
shape: グラデーションの形状（circleまたはellipse）size: グラデーションのサイズ（closest-side,farthest-side,closest-corner,farthest-corner）position: グラデーションの中心位置（ピクセル、パーセント、またはcenter,top,leftなどのキーワードで指定）color-stop: グラデーションでの色とその位置を定義する
例 1: 単純な放射状グラデーション
この例では、中心から赤から青へ遷移する放射状グラデーションを作成します:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, blue);
}
例 2: 異なる位置の放射状グラデーション
この例では、放射状グラデーションの中心が左上に移動し、黄色から緑への遷移を作成します:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at top left, yellow, green);
}
例 3: 複数色の放射状グラデーション
この例では、中心から赤、黄色、緑、青の4色を滑らかに遷移するグラデーションを作成します:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle, red, yellow, green, blue);
}
例 4: 制御点を持つ放射状グラデーション
この例では、各色の正確な配置を決定する制御点を指定しています:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
}
8.3 複雑なグラデーションの例
例 1: 半透明の線形グラデーション
この例では、半透明な赤から半透明な青へのグラデーションを作成するために半透明が使用されています:
<div class="background"></div>
.background {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}
例 2: サイズを持つ放射状グラデーション
この例では、最も接近した辺を満たす楕円の放射状グラデーションを作成します:
<div class="background"></div>
.background {
min-height: 200px;
background: radial-gradient(ellipse closest-side, red, blue);
}
例 3: ボタンのグラデーション作成
グラデーションはボタンをより魅力的にすることができます。このグラデーションは、明るい緑から暗い緑への遷移を上から下に行い、ボタンにボリュームと深さを与えます:
<button type="button" class="button">Button</button>
.button {
background: linear-gradient(to bottom, #4caf50, #2e7d32);
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
グラデーションを使用する利点:
1. 視覚的魅力。 グラデーションによって色間の滑らかな遷移を作成し、デザイン要素に視覚的な深さと魅力を追加できる。
2. 柔軟性。 グラデーションは、単純な遷移から複雑な多色背景まで様々なエフェクトを作成するために調整できる。
3. レスポンシブデザインのサポート。 グラデーションは簡単に様々な画面サイズや解像度に適応でき、レスポンシブなウェブデザインを作成するのに役立つ。
GO TO FULL VERSION