ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSのグラデーションカラーの書き方を詳しく解説

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

PHPz
リリース: 2023-04-06 13:57:11
オリジナル
2349 人が閲覧しました

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

1. 線形グラデーション

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

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

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

以下は角度値の例です:

linear-gradient(0deg, #FFDAB9, #7FFFD4);
linear-gradient(90deg, #FFDAB9, #7FFFD4);
linear-gradient(45deg, #FFDAB9, #7FFFD4);
ログイン後にコピー
  1. グラデーションの色の定義

線形グラデーションの色を定義するには、次のようにします。 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);
ログイン後にコピー
  1. グラデーションの開始点と終了点

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

background: radial-gradient(at center, #FFDAB9, #7FFFD4);
ログイン後にコピー
ログイン後にコピー

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

background: radial-gradient(50% 50%, #FFDAB9, #7FFFD4);
ログイン後にコピー

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

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

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

background: radial-gradient(at center, #FFDAB9, #7FFFD4);
ログイン後にコピー
ログイン後にコピー

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート