グラデーションを実現するCSS-フロントエンドQ&A-php.cn

CSS は、さまざまな美しい効果を実現できる、一般的に使用される Web ページスタイルのデザイン言語です。その中でも、グラデーション効果は多くの Web デザイナーがよく使用するテクニックであり、CSS を通じて実現できます。この記事では、CSS を使用して線形グラデーションや放射状グラデーションなどのグラデーション効果を実現する方法を紹介します。

1. 線形グラデーション

線形グラデーションとは、一方向に色を徐々に変化させるプロセスを指します。この効果は、CSS の線形グラデーションプロパティを通じて実現できます。

具体的な実装方法は以下のとおりです。

HTML要素を作成し、そのCSSスタイルを設定します

.box {

width: 300px;
height: 200px;
background: linear-gradient(to right, #03a9f4, #f44336);

ログイン後にコピー

}

CSS コードでは、「linear-gradient」属性を使用して線形グラデーションを定義します

Linear-gradient には 2 つのパラメータがあり、最初のパラメータは方向であり、左、右、下、上、左下およびその他の指定された方向をサポートします。 2 番目の引数は、カンマで区切られた色の値の配列です。この配列の色の値は、グラデーションの開始点から終了点までの色のグラデーションを表します。

たとえば、次のコードは左から右への線形グラデーションを表します。グラデーションの開始点は #03a9f4 で、終了点は #f44336 です。

background: Linear-gradient(右へ、#03a9f4、# f44336);

複数の色の値を設定して、色のグラデーションをより滑らかにすることもできます:

background: Linear-gradient(右へ、#03a9f4、 #2196f3, #9c27b0, #f44336 );

このようにして、左から右へ 4 つの異なる色の遷移が存在します。

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

放射状グラデーションとは、中心点から始まり徐々に周囲に移動する色のグラデーションのプロセスを指します。この効果は CSS を通じて実現することもできます。

具体的な実装方法は以下のとおりです。

HTML要素を作成し、そのCSSスタイルを設定します

.box {

width: 300px;
height: 200px;
background: radial-gradient(circle at center, #03a9f4, #f44336);

ログイン後にコピー

}

CSS コードでは、「radial-gradient」属性を使用して放射状グラデーションを定義します。

radial-gradient には 3 つのパラメータがあり、最初のパラメータはグラデーションの種類を指定し、円 (circle) と楕円 (ellipse) をサポートします。 2 番目のパラメーターは、「X 軸位置 Y 軸位置」という構文を使用して、グラデーションの中心の位置を指定します。たとえば、「中心中心」は、要素の中心からグラデーションを開始することを意味します。

3 番目のパラメーターは、グラデーションカラー値の配列をカンマで区切って指定します。

たとえば、次のコードは中心から始まる放射状のグラデーションを表します。グラデーションの開始点は #03a9f4 で、終了点は #f44336 です。

background:radial-gradient(中心の円、#03a9f4、#f44336);

複数の色の値を設定して、グラデーションをより滑らかにすることもできます:

background:radial-gradient(中心の円、#03a9f4 , #2196f3, #9c27b0, # f44336);

このように、中心から周囲に向かってグラデーションがかかる過程で、最初の値から最後の値まで色が徐々に変化していきます。真ん中のグラデーション処理。

3. 他のグラデーション

CSS は、繰り返しグラデーション、不規則なグラデーションなど、他のタイプのグラデーションもサポートしています。これらのグラデーションタイプの実装方法も同様で、スタイル属性を設定することで実現できます。

たとえば、次のコードは繰り返し線形グラデーションを表します:

background: testing-linear-gradient(to right, #03a9f4, #2196f3-20px, #f44336 40px);

このコードでは、色のグラデーションの開始点は #03a9f4、終了点は #f44336 で、要素全体が塗りつぶされるまで色の変更が繰り返されます。このうち「#2196f3-20px」は、このカラー値をx軸方向に20ピクセル減少させ、千鳥効果を形成することを意味します。

4. 概要