CSSグラデーション：構文クラッシュコース-CSSチュートリアル-php.cn

CSSグラデーション：クラッシュグラデーションコース

CSS Gradients: A Syntax Crash Course

過去には、ほとんどのWebサイトが画像を使用して美しいUIを作成しました。さまざまなCSS属性のおかげで、この傾向は変わりました。このチュートリアルは、CSSグラデーションを学ぶのに役立ちます。勾配を使用して、さまざまなUI要素とバックグラウンドの画像を置き換えることができます。少し練習すると、画像を使用せずに複雑なパターンを作成できます。

CSSグラデーションはブラウザでよくサポートされているため、2つ以上の指定された色の間のスムーズな視覚的遷移を作成できます。勾配を使用すると、サイズ、角度、勾配のカラーストップ位置など、多くの設定を制御できます。

この記事では、線形、放射状、および新しい繰り返し勾配を紹介します。

キーポイント

線形勾配

線形勾配は、最も一般的に使用される勾配です。このように見えますが、括弧内の値は値のタイプを示します：

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

ログイン後にコピー

方向を指定しない場合、グラデーションは上部から始まり、最初の色の完全な強度で始まり、底に到達すると最後の色にスムーズに遷移します。

より詳細な制御については、勾配の方向を指定できます。簡単な用語（左、右下など）を使用して実装したり、角度を指定したりできます。次のコードスニペットは、左から右への背景を作成します：

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

ログイン後にコピー

codepenの例を表示：

左から右線形勾配

古いブラウザは、わずかに異なる構文をサポートし、ブラウザ固有のプレフィックスが必要です。古いブラウザでは、エンドポイントではなく開始点を指定します。古いブラウザのCSS3グラデーションコードは次のとおりです。

線形勾配の角度を指定

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

ログイン後にコピー

特定の角度で勾配を作成する必要がある場合は、角度を直接指定できます。次のコードでは、60度の勾配が作成されます。

下から上へのラインをゼロとして扱い、線が時計回りに移動すると、角度が増加します。たとえば、

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

ログイン後にコピー

これにより、下部に赤、上部に青の勾配が作成されます。そして、次のコードは、左に赤、右に青の水平勾配を作成します。

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

ログイン後にコピー

codepenの例を表示：異なる角度の線形勾配

線形勾配でカラーストップ位置を指定します

色を不均一に変更したい場合は、自分でカラーストップ位置を指定できます。カラーストップ位置は、パーセンテージ値または絶対長として指定できます。最初と最後の色の停止位置を指定する必要はありません。特定の色は、指定された色の位置で完全な強度があります。例は次のとおりです。

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

ログイン後にコピー

停止位置が指定されていない場合、色は均等に間隔を空けます。

codepenで例を表示：カラーストップ付きの線形勾配

radial radial勾配

放射状勾配はあまり一般的ではなく、より複雑です。これは、ラジアル勾配の構文です：

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

ログイン後にコピー

何も指定されていない場合、デフォルトの形状は楕円で、サイズは最も遠い角度、位置は中心です。カラーストップ位置は、線形勾配とまったく同じ方法で指定されています。次のコードスニペットでは、楕円形の放射状勾配が描かれます。

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

ログイン後にコピー

codepenの例を表示：

radial勾配の例放射状勾配のサイズを変更します

ラジアル勾配のサイズは、最も近い側面、最も遠い、最も近いコーナー、最も遠いコーナーの4つの値によって決定されます。形状値で使用すると、これらのキーワードは形状を定義します。勾配の形状は、勾配が勾配が適用される要素の境界を越えて無限に伸び続けるときに機能します。

これを明確にするために例を見てみましょう。 4つの要素に4つの勾配を作成します

次のCSSでは、4つのキーワード値を使用しました。

Codepenの例を表示：

<code>.example {
  background: linear-gradient(0deg, red, blue);
}</code>

ログイン後にコピー

異なるサイズのキーワード値を持つ放射状勾配デモ中に各勾配には微妙ではあるが明らかな違いがあることに注意してください。

<code>.example {
  background: linear-gradient(90deg, red, blue);
}</code>

ログイン後にコピー

ラジアルグラジエントのカラーストップ位置を定義します

ラジアル勾配のカラーストップ位置は、線形勾配に似ています。また、円の中心の位置をパーセンテージとして指定することに注意してください。必要に応じて、ピクセル値も使用できます。これを実証するためのコードスニペットは次のとおりです

codepenの例を表示：

色の停止を備えた放射状勾配

グラデーションを繰り返します

繰り返し勾配は他の勾配に似ており、同じパラメーターを取得します。唯一の違いは、カラーストップ位置を無限に繰り返すことです。色の位置は、ベース勾配の長さの倍数に応じてオフセットされます。ご覧のとおり、この繰り返しにより、複雑なパターンと背景を作成できます。

<code>.example {
  background: linear-gradient(
    to bottom, yellow, red 70%, black
  );
}</code>

ログイン後にコピー

注意すべきことの1つは、同じ要素で複数の繰り返し勾配を使用する場合、最初の勾配が上部に表示されることです。もちろん、これは、最初の勾配の各色が100％不透明である場合（つまり、透明度がない）、スタック内の他の勾配が見えないことを意味します。

線形勾配

を繰り返します

基本的な繰り返し線形勾配を作成するには、次のことを行うことができます。

<code>.example {
  background: linear-gradient(
    [方向], [第一种颜色], [第二种颜色], [更多颜色 ...]
  );
}</code>

ログイン後にコピー

codepenの例を表示：

線形勾配を繰り返します

突然色を変更するには、2つの色を指定する必要があります。微妙なパターンを作成するには、複数の背景画像を追加するのと同じように、別のグラデーションを追加するだけです。

今回は、勾配を白の代わりに透明に設定しました。さまざまな色を試すことをお勧めします。

<code>.example {
  background: linear-gradient(to right, hotpink, lightpink);
}</code>

ログイン後にコピー

codepenで例を表示：

複数の勾配で線形勾配を繰り返す

radial radial radial勾配を繰り返します繰り返しの放射状勾配は、標準的な放射状勾配に似ています。これが、単純な繰り返しラジアルグラデーションを作成するためのコードです：

codepenの例を表示：

ラジアルグラジエントの繰り返しこのような複数の繰り返しラジアル勾配を重ねることもできます。

<code>.example {
    background: -prefix-linear-gradient(left, red, blue);
}</code>

ログイン後にコピー

codepenの例を表示：複数の勾配で放射状勾配を繰り返します

結論

このチュートリアルでは、CSSグラデーションのすべての側面をカバーしようとしています。多くの場合、単純なパターンが必要な場合、勾配は画像を使用する必要性を排除できます。もちろん、勾配は画像の追加のHTTP要求を回避しますが、パフォーマンスの問題を引き起こす可能性があり、注意して使用する必要があります。

<code>.example {
  background: linear-gradient(60deg, red, blue);
}</code>

ログイン後にコピー

CSS勾配に関するよくある質問 CSSの線形勾配とradial骨勾配の違いは何ですか？

CSSでは、勾配を使用して、2つ以上の指定された色の間のスムーズな遷移を作成します。線形勾配は、あるポイントから別のポイントから終了まで、線に沿って色を遷移します。勾配の方向は、角度（「右」または「45Deg」など）または開始点（例：「右上」）を宣言することによって定義できます。

一方、ラジアル勾配は、色に円形または楕円形のパターンで遷移します。それらはポイントから始まり、外側に拡張し、円形または楕円形の形状を作成します。さまざまなパラメーターを使用して、放射状勾配の形状、サイズ、位置を制御できます。

CSSで繰り返し勾配を作成する方法は？

CSSは、繰り返し線形勾配（）および繰り返しradial-gradient（）関数を使用して繰り返し勾配を作成する方法を提供します。これらの関数は、非反応性の対応物と同様に機能しますが、指定された勾配パターンを無期限に繰り返し、シームレスな繰り返しパターンを作成します。これらの関数の構文は、Linear-Gradient（）およびradial-Gradient（）の構文と類似していますが、繰り返しパターンを作成する方法でカラーストップ位置を指定する必要があります。

CSSグラデーションのカラーストップ位置は何ですか？

カラーストップ位置は、スムーズな遷移をレンダリングしたい色であり、各色が勾配に表示される必要があります。 CSSグラデーションでは、必要なだけ多くのカラーストップを指定できます。各カラーストップ位置は、オプションの長さまたはパーセンテージが続く色の値によって定義されます。長さまたはパーセンテージを指定しない場合、カラーストップ位置は均等に間隔を空けます。

線形勾配の方向を制御する方法は？

線形勾配（）関数の最初のパラメーターを使用して、線形勾配の方向を制御できます。このパラメーターは、角度（「45Deg」など）または「右に」または「左上」などの出発点を指定するキーワードです。方向を指定しない場合、勾配は上から下に移動します。

放射状勾配の形状とサイズを制御する方法は？

radial-gradient（）関数の最初のパラメーターを使用して、ラジアル勾配の形状とサイズを制御できます。このパラメーターは、形状キーワード（ "Circle"または "Ellipse"）になり、その後にオプションのサイズキーワード（「最も近い側」、「最も遠い」、「最も近いコーナー」、「最も遠いコーナー」）が続きます。または場所。形状を指定しない場合、勾配は楕円形になります。サイズを指定しない場合、勾配は最も近い側に拡張されます。

CSSグラデーションで透明度を使用できますか？

はい、RGBA色の値を使用して、CSS勾配で透明度を使用できます。 RGBA色の値は、RGBA（赤、緑、青、アルファ）によって指定されています。アルファパラメーターは、0.0（完全に透明）から1.0（完全に不透明）の数です。

ハードカラーバリエーションで勾配を作成する方法は？

ハードカラーの変更を伴うグラデーションを作成するには、同じ位置で複数のカラーストップ位置を使用できます。たとえば、「青、緑50％、緑の50％、黄色」は、中央で突然青から緑に変化し、最後に緑から黄色に変化する勾配を作成します。

グラデーションを背景画像として使用できますか？

はい、CSSの背景画像として勾配を使用できます。勾配関数はCSS画像データ型を返し、画像を使用できる場所ならどこでも使用できます。たとえば、勾配を要素の背景画像として、または複数の背景の一部として使用できます。

CSSでグラデーションをアニメーション化できますか？

CSSは、直接的なアニメーショングラデーションをサポートしていません。ただし、アニメーション化されたバックグラウンドポジションまたは繰り返しグラデーションを備えた要素の背景サイズのサイズ、またはアニメーションコンテンツのマスクとしてグラデーションを使用することにより、同様の効果を達成できます。

すべてのブラウザはCSSグラデーションをサポートしていますか？

CSSグラデーションは、Chrome、Firefox、Safari、Edge、Internet Explorer 10以降など、すべての最新のブラウザーによって広くサポートされています。ただし、グラデーションをサポートしていない古いブラウザの場合、代替色を提供する必要があります。

以上がCSSグラデーション：構文クラッシュコースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。