CSS グラデーション カラーは Web デザインで一般的に使用されるテクノロジーで、ページの色の変化をより自然にし、ページの美しさと表現力を高めることができます。 CSSのグラデーションカラーの書き方を紹介します。
1. 線形グラデーション
線形グラデーションを定義する前に、グラデーションの方向を考慮する必要があります。デフォルトでは、線形グラデーションは上から下、つまり垂直方向ですが、この方向は角度の値を設定することで変更できます。
以下は角度値の例です:
linear-gradient(0deg, #FFDAB9, #7FFFD4); linear-gradient(90deg, #FFDAB9, #7FFFD4); linear-gradient(45deg, #FFDAB9, #7FFFD4);
線形グラデーションの色を定義するには、次のようにします。 linear-gradient()
関数を使用する必要があります。
background: linear-gradient(to right, #FFDAB9, #7FFFD4);
to right は、左から右への水平グラデーションに続いて、グラデーションしたい色を指定することを意味します。要素に複数の色のグラデーションを設定したい場合は、次のように記述できます:
background: linear-gradient(to right, #FFDAB9, #7FFFD4, #FFDAB9);
2. 放射状グラデーション
放射状グラデーションは線形グラデーションとは多少異なります。中央から外側に向かって要素全体が覆われるまで広げます。放射状グラデーションを定義するには、次の要素を構成する必要があります。
放射状グラデーションを円または楕円に設定して、さまざまな形状を有効にすることができます。
background: radial-gradient(circle, #FFDAB9, #7FFFD4); background: radial-gradient(ellipse, #FFDAB9, #7FFFD4);
放射状グラデーションには光源があり、光源が開始するさまざまな半径の円から色が拡散されます。から放射します。したがって、グラデーションの開始点と終了点を定義する必要があります。
background: radial-gradient(at center, #FFDAB9, #7FFFD4);
at center
キーワードを使用して、要素の中心に光源を設定します。
background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);
座標値を使用して光源の位置を定義すると、よりカスタマイズされたニーズを実現できます。
線形グラデーションと同様に、放射状グラデーションでもグラデーション カラーを指定する必要があります。
background: radial-gradient(at center, #FFDAB9, #7FFFD4);
以上は必要に応じて柔軟に使えるCSSのグラデーションカラーの書き方です。
以上がCSSのグラデーションカラーの書き方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。