勾配

CSS ポッドキャスト - 021: グラデーション

サイトを構築するとします 見出し、概要、ボタン付きのイントロがあります デザイナーから、このイントロ用に紫色の背景のデザインが渡されました。 唯一の問題は、背景がグラデーションとして紫色の 2 つの色合いになっていることです。 その具体的な方法は？

見出し、段落、リンクがある濃い紫から明るい紫のグラデーションの背景。

最初はそのためにデザインツールから画像をエクスポートする必要があると思うかもしれませんが、 代わりに linear-gradient してください。

グラデーションは画像で、画像を使用できる場所、 CSS を使って色、数字、角度から構成されています。 CSS グラデーションでは、2 色間の滑らかなグラデーションから、あらゆるものを作成できます。 複数のグラデーションを混ぜて繰り返すことで、魅力的な作品を生み出すことができます。

線形グラデーション

対応ブラウザ

  • Chrome: 26。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

ソース

linear-gradient() 関数は、2 つ以上の色の画像を段階的に生成します。 複数の引数を取りますが、最もシンプルな構成では、 このような色を渡すと、自動的に均等に分割され、ブレンドされます。

.my-element {
    background: linear-gradient(black, white);
}

角度や、角度を表すキーワードを渡すこともできます。 キーワードを使用する場合は、to キーワードの後に方向を指定します。 つまり、黒と白のグラデーションが必要な場合、 左（黒）から右（白）に並ぶ 最初の引数として角度を to right として指定します。

.my-element {
    background: linear-gradient(to right, black, white);
}

カラー ストップ値は、カラーが止まり、そのカラー ストップ値と隣接する色が混ざり合っていくところで定義されます。 45 度の角度で流れる濃い赤色から始まるグラデーションの場合、 グラデーションのサイズの 30% が薄い赤色に変わります

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

linear-gradient() には、色とカラーストップをいくつでも追加できます。 また、各グラデーションをカンマで区切ることで、グラデーションを重ねることができます。

円形グラデーション

対応ブラウザ

  • Chrome: 26。 <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 16. <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

ソース

円形に放射状に広がるグラデーションを作成するために、 radial-gradient() 役立つことがあります。 linear-gradient() に似ています。 角度を指定する代わりに、必要に応じて位置と終了形状を指定できます。 色だけを指定した場合、radial-gradient() は位置を center として自動選択します。 ボックスのサイズに応じて円または楕円を選択します。

.my-element {
    background: radial-gradient(white, black);
}

グラデーションの位置は、キーワードや数値を使用する background-position に類似しています。 放射状グラデーションのサイズによって、グラデーションの終了形状のサイズが決まります （円または楕円）のデフォルトは farthest-corner です。 これは、中央から箱の最も遠い隅にぴったり収まることを意味します。 次のキーワードも使用できます。

  • closest-corner は、グラデーションの中央に最も近い角に交わります。
  • closest-side は、箱の内側でグラデーションの中央に最も近い側に接触します。
  • farthest-side は closest-side と逆の処理を行います。

linear-gradient と同様に、カラーストップはいくつでも追加できます。 同様に、radial-gradients はいくつでも追加できます。

円錐グラデーション

対応ブラウザ

  • Chrome: 69。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 83。 <ph type="x-smartling-placeholder">
  • Safari: 12.1。 <ph type="x-smartling-placeholder">

ソース

円錐グラデーションは、ボックス内に中心点があり、上から（デフォルト）、 360 度回転します。

.my-element {
    background: conic-gradient(white, black);
}

conic-gradient() 関数は、位置と角度の引数を受け入れます。

デフォルトの角度は 0 度で、上端の中心から開始し、 角度を 45deg に設定すると、右上隅になります。 angle の引数には、線形グラデーションや放射グラデーションなど、あらゆる型の角度値を指定できます。

デフォルトでは中央に配置されます。 放射状グラデーションや線形グラデーションと同様に、 キーワードベースでも 数値で定義することもできます。

他のグラデーション タイプと同様に、カラーストップはいくつでも追加できます。 円錐グラデーションを使用したこの機能の適切なユースケースは、CSS による円グラフのレンダリングです。

繰り返しとミキシング

勾配の種類ごとに繰り返しタイプもあります。 これらは repeating-linear-gradient() repeating-radial-gradient()、 repeating-conic-gradient()。 これらは非繰り返し関数に似ており、同じ引数を取ります。 違いは、定義されたグラデーションを繰り返してボックスを埋めることができる場合は、 両方のサイズで 自動的に配信されます

グラデーションが繰り返されていないと思われる場合は いずれかのカラーストップに長さを設定していない可能性があります。 たとえば カラーストップの長さを設定して repeating-linear-gradient でストライプの背景を作成できます。

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

background プロパティで勾配関数を組み合わせることもできます。 必要に応じていくつでも勾配を定義できます 作成できます たとえば、複数の線形グラデーションを混在させたり、2 つの線形グラデーションと放射状のグラデーションを組み合わせたりすることができます。

リソース

理解度をチェックする

勾配に関する知識をテストする

グラデーションを作成するために必要な最小色は何色ですか。

1
もう一度考えてみましょう。
2
同じ色で単色に見える場合もありますが、2 色以上必要です。
3
もう一度考えてみましょう。
4
もう一度考えてみましょう。

要素の背景として複数のグラデーションを使用できますか？

正しい
background-image プロパティでは多くの勾配を使用できます。その場合は、カンマで区切ってください。
False
でも、できるはず！