CSS のグラデーション背景
この簡単なガイドは、HTML 要素の虹のようなグラデーションの背景を定義するために使用できる CSS プロパティの使用に関するものです。
CSS グラデーション
CSS グラデーションを使用して、2つ以上の指定された色の間のシームレスな遷移を表示できます。 CSS は 3つの異なるグラデーション タイプを識別します。
- 線形グラデーション (左、右、上、下、斜めに移動)
- 丸みを帯びたグラデーション (中心で定義)
- CONIC グラデーション (中心点を中心に回転)
グラデーションは、背景やその他の画像が使用されるあらゆる場所で使用できます。 グラデーションは動的に生成されるため、以前は同様の効果を得るために使用されていたビットマップ グラフィック イメージ ファイルが不要になります。
グラデーションはブラウザが生成するため、ビットマップ画像よりもズームインした方が見栄えがよくなり、すぐにサイズを変更できます。
線形グラデーションから始まるすべてのグラデーション タイプに適用される機能について説明します。 そこから、放射状および円錐状のグラデーションに進みます。
線形勾配
線形グラデーションを作成するには、少なくとも 2つのカラー ストップを定義することをお勧めします。 スムーズな遷移を行うために必要ないくつかの色を定義します。
これらの色はカラー ストップと呼ばれます。 グラデーション効果とともに、始点と方向 (または角度) を指定できます。
構文 - 線形グラデーション:
background-image: linear-gradient(direction, color1, color2, ...);
指定できる色の数に制限はありません。 方向もオプションの引数です。 デフォルトでは、方向は上から下に直線的です。
次の HTML ページには、高さ 100px の div とグラデーションの背景画像が含まれています。
<head>
<style>
#myBlock {
height: 100px;
background-image: linear-gradient(yellow, grey);
}
</style>
</head>
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
グラデーションの方向を指定していないことに注意してください。方向の値であるため、上から下の方向に設定されます。
さらに、名前や角度でも任意の方向を指定できます。 次の例では、グラデーションを左から右方向に設定します。
#myBlock {
height: 100px;
background-image: linear-gradient(to right,blue,pink);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
斜め位置で方向を指定できます。 そのためには、水平方向と垂直方向の開始位置を指定する必要があります。
#myBlock {
height: 100px;
background-image: linear-gradient(to bottom right,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
方向角度を指定して、色設定をより詳細に制御できます。
#myBlock {
height: 100px;
background-image: linear-gradient(160deg,grey,yellow,orange);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
色を配置する
カラー ストップは、デフォルトの位置にとどまる必要はありません。 ゼロ、1、または 2 パーセンテージの値を指定することで、それぞれの位置を調整できます。
パーセンテージで指定された位置の始点と終点は、それぞれ 0% と 100% です。 ただし、必要に応じて、これらの範囲外の値を使用して、目的の結果を得ることができます。
場所を指定しない場合、特定のカラー ストップの位置が自動的に決定されます。 最初と最後のカラー ストップはそれぞれ 0% と 100% になり、追加のカラー ストップは隣接するカラー ストップの中間になります。
次の例では、3つの色を使用し、それらの位置を 3つの方法で指定しました。1つは px で、もう 1つはパーセンテージで、最後の 1つはそのままにして、その位置がそれに応じて設定されるようにします。
#myBlock {
height: 100px;
background: linear-gradient(to right, yellow 28px, red 77%, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
放射状グラデーション
線形グラデーションとは対照的に、放射状グラデーションは中心点から外側に放射状に広がります。 その中心点の位置は自由で、楕円形や円形にすることもできます。
線形グラデーションと同様に、放射状グラデーションでは 2つの色のみを使用する必要があります。 デフォルトでは、グラデーションの中心は 50% マークにあり、ボックスの縦横比に合わせて楕円形になっています。
構文 - 放射状グラデーション:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
たとえば、次の CSS コードは 3 色の放射状グラデーションを作成します。 位置や形状を指定しない場合、中心点から始まるすべての色が均等に広がります。
#myBlock {
height: 100px;
background: radial-gradient(red, yellow, magenta);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
放射状グラデーションのサイジング
放射状グラデーションでは、線形グラデーションとは異なり、サイズを指定できます。 closest-corner、closest-side、farthest-corner、および farthest-side の値がオプションにあり、farthest-corner がデフォルトとして機能します。
楕円と円には、長さやパーセンテージなどの追加のサイズ オプションがあります。 次の例は、さまざまなサイズとそれに対応する出力を示しています。
#myBlock {
height: 100px;
background-image: radial-gradient(closest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
#myBlock {
height: 100px;
background-image: radial-gradient(farthest-side at 65% 50%, magenta, yellow, beige);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
円錐勾配
円錐グラデーションは、(中心から放射するのではなく) 定義された中心点を中心に色が回転するグラデーションのタイプです。 円グラフとカラー ホイールは、円錐グラデーションの 2つの例ですが、チェッカーボードやその他の興味深い効果を作成するためにも使用できます。
conic-gradient 構文は、radial-gradient 構文と同等です。 ただし、カラー ストップは度とパーセンテージの単位でのみ定義する必要があり、絶対的な長さではありません。
また、グラデーションの中心から出るグラデーション ライン上ではなく、グラデーション アークの周囲に配置する必要があります。
構文 - 円錐勾配:
background-image: conic-gradient([angle] [position,] color [degree], color [degree], ...);
デフォルトの位置と角度は、それぞれ 0 と center です。
たとえば、次数が指定されていない場合、グラデーションの色は中心点の周りに均等に分散されます。
#myBlock {
height: 100px;
background-image: conic-gradient(red, yellow, cyan);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
円錐勾配の位置
放射状グラデーションと同様に、円錐グラデーションの中心点の位置を指定することもできます。
次のコード例では、中心点の位置とすべての色の度合いを指定しています。
#myBlock {
height: 100px;
background-image: conic-gradient(at 10% 40%, cyan 10%, magenta 30%, yellow 50%);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
グラデーションの角度を変更する
定義する色のリストは、通常、円の周りに均等に分散されます。 円錐グラデーションの開始角度を指定するには、from キーワードを使用し、その後に角度を指定します。
色分岐点の後に角度または長さを追加することで、色分岐点の別の位置を指定することもできます。 次の例では、円錐グラデーションの中心を設定する角度を定義しています。
#myBlock {
height: 100px;
background-image: conic-gradient(from 48deg, red, orange 40%, yellow 65%, green);
}
<body>
<h1>Linear Gradient - In Top to bottom Direction</h1>
<div id="myBlock"></div>
</body>
まとめ
グラデーションの背景を設定できる複数のオプションがあります。 すべての例のように、div 要素のグラデーションの背景を設定しました。
同様のパターンで、この背景は、背景画像のアプリケーションをサポートしていれば、任意の HTML 要素で設定できます。