CSSのグラデーションカラーの書き方を詳しく解説

CSS グラデーション カラーは Web デザインで一般的に使用されるテクノロジーで、ページの色の変化をより自然にし、ページの美しさと表現力を高めることができます。 CSSのグラデーションカラーの書き方を紹介します。

1. 線形グラデーション

1. グラデーションの方向の定義

線形グラデーションを定義する前に、グラデーションの方向を考慮する必要があります。デフォルトでは、線形グラデーションは上から下、つまり垂直方向ですが、この方向は角度の値を設定することで変更できます。

• 水平方向のグラデーションが必要な場合は、対応する角度値を設定できます。たとえば、0 度は左から右、180 度は右から左などを意味します。
• 斜めのグラデーションが必要な場合は、角度の値を度で設定できます。

以下は角度値の例です:

linear-gradient(0deg, #FFDAB9, #7FFFD4);
linear-gradient(90deg, #FFDAB9, #7FFFD4);
linear-gradient(45deg, #FFDAB9, #7FFFD4);

2. グラデーションの色の定義

線形グラデーションの色を定義するには、次のようにします。 linear-gradient()関数を使用する必要があります。

background: linear-gradient(to right, #FFDAB9, #7FFFD4);

to right は、左から右への水平グラデーションに続いて、グラデーションしたい色を指定することを意味します。要素に複数の色のグラデーションを設定したい場合は、次のように記述できます:

background: linear-gradient(to right, #FFDAB9, #7FFFD4, #FFDAB9);

2. 放射状グラデーション

放射状グラデーションは線形グラデーションとは多少異なります。中央から外側に向かって要素全体が覆われるまで広げます。放射状グラデーションを定義するには、次の要素を構成する必要があります。

1. グラデーションの形状

放射状グラデーションを円または楕円に設定して、さまざまな形状を有効にすることができます。

background: radial-gradient(circle, #FFDAB9, #7FFFD4);
background: radial-gradient(ellipse, #FFDAB9, #7FFFD4);

2. グラデーションの開始点と終了点

放射状グラデーションには光源があり、光源が開始するさまざまな半径の円から色が拡散されます。から放射します。したがって、グラデーションの開始点と終了点を定義する必要があります。

background: radial-gradient(at center, #FFDAB9, #7FFFD4);

at center キーワードを使用して、要素の中心に光源を設定します。

background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);

座標値を使用して光源の位置を定義すると、よりカスタマイズされたニーズを実現できます。

3. グラデーション カラーの制御

線形グラデーションと同様に、放射状グラデーションでもグラデーション カラーを指定する必要があります。

background: radial-gradient(at center, #FFDAB9, #7FFFD4);

以上は必要に応じて柔軟に使えるCSSのグラデーションカラーの書き方です。

以上がCSSのグラデーションカラーの書き方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。