CSSグラデーション

グラデーションは、一般的にWebページをより美しくするために使用されます。ボックスのスタイルを設定するために無地の色を使用する代わりに、グラデーションを使用すると、2つ以上の色の間の遷移を表示できます。これにより、視覚的に魅力的で人目を引くことができます。

CSSでグラデーションを操作するには、線形グラデーションと放射状グラデーションの2つのプロパティを使用できます。これらのプロパティを使用すると、それぞれ線形グラデーションと放射状グラデーションを作成できます。

このチュートリアルでは、いくつかの例を使用して、CSSで線形および放射状のグラデーションを作成する方法について説明します。このチュートリアルを終了すると、CSSでグラデーションを作成するエキスパートになります。

CSSグラデーション

デザインでは、グラデーションは2つ以上の色の間の遷移です。グラデーションは単純なトランジションにすることができますが、角度や複数の色を含めることもでき、さまざまな方法でスタイルを設定できます。

CSSでサポートされているグラデーションには2つのタイプがあります。これらは：

• 線形グラデーション
• 放射状のグラデーション

線形グラデーションは、2つ以上の色の間で、上から下、または左から右への遷移を作成します。ラジアルグラデーションは、シェイプなどの原点から放射状に広がるカラートランジションです。

CSSでは、グラデーションは背景のCSSプロパティを使用して定義されます。このプロパティは、Web要素の背景を作成するために使用され、background-colorやbackground-imageなどのCSS背景プロパティの省略形です。

backgroundプロパティを使用するための構文は次のとおりです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

background: typeOfBackground;

これで、CSSでグラデーションの作成を開始する準備が整いました。線形グラデーションについて説明することから始めましょう。

CSS線形グラデーション

線形グラデーションは、直線に沿った2つ以上の色の間の遷移です。

たとえば、線形グラデーションの背景は、要素の左から右、上から下、または左下から右上隅に表示される場合があります。デフォルトでは、グラデーションは上から下に表示されますが、グラデーションのカスタム方向を指定できます。

線形グラデーションには、トランジションに含める色であるカラーストップがあります。線形グラデーションで指定する色の数に制限はありません。

CSSの線形グラデーション関数の構文は次のとおりです。

background: linear-gradient (direction, color1, color2 ...);

この構文では、directionはグラデーションの方向を表し、color1、color 2などは、グラデーションのカラーストップを表します。

CSSの線形グラデーションの例をいくつか見てみましょう。

上から下へのグラデーション

ボックスの上から下に表示されるグラデーションを作成するとします。これは、linear-gradient()で作成されたデフォルトのグラデーションです。 財産。

グラデーションは、色＃00C9FF（水色）で始まり、色＃92FE9D（水色）で終わる必要があります。グラデーションを作成するために使用できるコードは次のとおりです。

.gradient {
	background: linear-gradient(#00C9FF, #92FE9D);
}

コードは次のようになります：

左から右へのグラデーション

一方、左から右への色の変化を示すグラデーションを作成したい場合があります。次のコードを使用してこれを行うことができます：

.gradient {
	background: linear-gradient(to right, #00C9FF, #92FE9D);
}

私たちのコードは次を返します：

グラデーションは、2つの色の間で左から右に遷移します。この遷移は、to leftを指定したために発生します グラデーションの方向として。または、グラデーションを右から左に表示したい場合は、to leftを使用することもできます。 to rightの代わりに 私たちのコードで。

対角グラデーション

linear-gradient()を使用して斜めのグラデーションを作成できます グラデーションの水平および垂直の開始点を指定することにより、プロパティ。

右下に移行するグラデーションを作成する場合は、to bottom rightを指定して作成できます。 あなたのグラデーションとして。または、左上に移行するグラデーションが必要な場合は、to top left使用できます。 あなたのグラデーションとして。

ボックスの右上に遷移するグラデーションを作成するとします。このコードを使用してこれを行うことができます：

.gradient {
	background: linear-gradient(to top right, #00C9FF, #92FE9D);
}

コードは次のようになります：

グラデーションは、左下の水色から始まり、ボックスの右上の緑色に移行します。

カラーストップ

これまでのところ、グラデーションは2つの色の間でのみ遷移しています。ただし、複数の色の間で遷移するより複雑なグラデーションを作成する場合は、3つ以上の色を指定できます。

色＃00D2FF（水色）から＃92FE9D（水色）、＃3A47D5（濃い青）に変化するグラデーションを作成するとします。この遷移は、左から右に発生する必要があります。このコードを使用してこのグラデーションを作成できます：

.gradient {
background: linear-gradient(to right, #00D2FF, #00C9FF, #3A47D5);
}

私たちのコードは次を返します：

この例では、グラデーションが3つの異なる色の間で左から右に遷移します。

角度

前の例では、事前定義された方向（つまり、右上から左下）を使用してグラデーションを作成しました。グラデーションの表示方法をより細かく制御したい場合は、カスタム角度を使用できます。

角度は、方向を指定する場所の代わりに、線形グラデーションの最初の値として指定する必要があります。

120度の角度で＃00C9FFと＃92FE9Dの間のトランジションを作成するとします。次のコードを使用してこれを行うことができます：

.gradient {
	background: linear-gradient(120deg, #00C9FF, #92FE9D);
}

私たちのコードは次を返します：

この例では、左から右に120度の角度で青と緑の間を遷移するグラデーションを指定しました。たとえば、40度の角度で遷移するグラデーションを作成する場合は、40degを指定できます。 私たちの角度として。

透明なグラデーション

CSSグラデーションは、RGBAカラーを使用して多かれ少なかれ透明にすることができます。

RGBA色は、RGB（赤、緑、青）の方法で色を表示します。ただし、RGBA色には、色の透明度を定義するalphaと呼ばれる追加のパラメーターが含まれています。 alphaパラメータの値は0から1の間でなければなりません（値が小さいほど、色がより透明になります）。

＃00C9FFと＃92FE9Dの色の間に左から右へのグラデーションを作成したいとします。最初の色は最初は50％透明で、最後の色は30％透明である必要があります。次のコードを使用して、このグラデーションを作成できます。

.gradient {
	background: linear-gradient(to right, rgba(0,201,255, 0.5), rgba(146,254,157, 0.7));
}

私たちのコードは次を返します：

これを以前のグラデーションと比較すると、色がより透明になっていることがわかります。この例では、16進値を使用する代わりに、RGBA値を使用して色を指定しました。

最初の色（青）のアルファ値として0.5を指定しました。これにより、色が50％透明になります。 2番目の色（緑）のアルファ値として0.3を指定しました。これにより、色が70％透明になります（アルファ値が低いほど、色が透明になります）。

ハードライン

通常、グラデーションを作成するときは、グラデーションの色の間をスムーズかつ段階的に移行する必要があります。ただし、グラデーションで2つの色を分離するグラデーションラインを作成する場合は、ハードラインを指定することで作成できます。

ハードラインを指定するには、次の構文を使用する必要があります。

linear-gradient(direction, hard-line, colors);

したがって、黒と緑のグラデーションの途中で発生するハードラインが必要な場合は、black 50%を使用できます。 、green 50% ハードラインとして。または、青とピンクのグラデーションで70％表示されるハードラインが必要な場合は、blue 70%を使用できます。 、pink 30% ハードラインとして。

グラデーションの中間点に黒いハードラインがあるグラデーションの例を次に示します。

.gradient {
	background: linear-gradient(to right, #00C9FF 50%, #92FE9D 50%);
}

私たちのコードは次を返します：

この画像では、グラデーションの途中で、ハードストップ位置が作成されていることがわかります。

CSS放射状グラデーション

ラジアルグラデーションは、原点から放射する2つ以上の色の間の遷移です。線形グラデーションの原点は、楕円または円のいずれかです。

放射状グラデーションには、少なくとも2つのカラーストップが必要です。また、グラデーションに含めることができるカラーストップの数に制限はありません。放射状グラデーションの構文は次のとおりです。

background: radial-gradient(shape size position, start color, next colors …, final color);

この構文を分解してみましょう。

• 形 は放射状オブジェクトの形状です（デフォルトでは、これは楕円です）。
• サイズ は放射状オブジェクトの形状のサイズです（デフォルトでは、これは最も遠い角です）。
• 位置 は放射状オブジェクトの位置です（デフォルトでは、これは中心です）。
• 開始色 グラデーションの最初の色です。
• 次の色 …は、開始色と最終色の間の色です。
• 最終色 グラデーションの最後の色です。

CSSで放射状グラデーションを作成するための構文がわかったので、いくつかの例を見ていきます。

デフォルトの放射状グラデーション

楕円であり、＃4B6CB7と＃D9E7FFの間で遷移する放射状グラデーションを作成するとします。このコードを使用してこれを行うことができます：

.gradient {
	background: radial-gradient(#4B6CB7, #D9E7FF);
}

私たちのコードは次を返します：

この例では、2つの色とグラデーションのデフォルト値を使用して放射状グラデーションを作成しました。したがって、デフォルト値を使用したため、グラデーションは等間隔に配置され、放射状オブジェクトの位置はボックスの中央にあり、放射状オブジェクトは楕円になります。

異なるカラーストップ

放射状のグラデーションで作業している場合は、独自のカラーストップを指定できます。これは、グラデーションの異なる色の間の遷移が、デフォルトのスムーズな遷移ではなく、グラデーションの特定の位置で発生することを意味します。

＃4B6CB7から＃D9E7FF、＃9198E5に遷移する放射状グラデーションを作成したいとします。最初の色はグラデーションの25％を占め、中間の色はグラデーションの50％を占め、最後の色はグラデーションの25％を占める必要があります。

次のコードを使用して、このグラデーションを作成できます。

.gradient {
	background: radial-gradient(#4B6CB7 25%, #D9E7FF 50%, #9198E5 25%);
}

私たちのコードは次を返します：

コードで指定したポイントで、グラデーションが3つの色の間で遷移します。この効果を実現するために、最初にグラデーションに含める色を指定し、次に色が占めるグラデーションの量を指定しました。したがって、たとえば、中間色＃D9E7FFはグラデーションの50％を占めます。

さまざまな形

デフォルトでは、放射状グラデーションに設定された形状は楕円です。ただし、グラデーションを円にすることもできます。これを行うには、形状の値circleを指定します。 あなたの勾配のために。

＃4B6CB7と＃D9E7FFの間で遷移するグラデーションを作成したいとします。放射状グラデーションの中心点は円である必要があります。次のコードを使用して、このグラデーションを作成できます。

.gradient {
	background: radial-gradient(circle, #4B6CB7, #D9E7FF);
}

私たちのコードは次を返します：

この例では、色＃4B6CB7と＃D9E7FFの間に放射状のグラデーションを作成しました。放射状グラデーションの中心点は、楕円ではなく円です。

放射状のグラデーション位置

放射状グラデーションの中心オブジェクトの位置を変更できます。放射状のグラデーションで中央のオブジェクトの位置を決定するために使用される4つのキーワードがあります。これらは：

• 最も近いコーナー
• 最も遠い角
• 最も近い側
• 最も遠い側

50px50pxの位置で最も遠い角に現れる円形の放射状グラデーションを作成したいとします。このコードを使用してこれを行うことができます：

.gradient {
	background: radial-gradient(circle farthest-corner at 50px 50px, #4B6CB7, #D9E7FF);
}

私たちのコードは次を返します：

この例では、放射状のグラデーションの中心点が50px50pxの位置の最も遠い隅に表示されます。中心点が左上隅にあることがわかります。これは、グラデーションが意図したとおりに機能していることを示しています。次に、グラデーションは、コードで指定した次の色に外側に移行します。

結論

グラデーションは、CSSで2つ以上の色の間のトランジションを作成するために使用されます。 CSSで使用されるグラデーションの2つの主なタイプは、線形グラデーションと放射状グラデーションです。

このチュートリアルでは、例を参照して、CSSで線形および放射状のグラデーションを作成する方法、および各グラデーションタイプによって提供されるさまざまな属性を使用してそれらのグラデーションをカスタマイズする方法について説明しました。これで、エキスパートのようにCSSグラデーションの操作を開始するために必要な知識を身に付けることができます。