パイチャートなどのCSSコニック勾配を作成する方法

キーテイクアウト

Lea Verouが擁護した
• Conic Gradientsは、ブラウザのサポートを獲得し始めており、パイチャートや色ホイールなどの効果を作成するために使用できます。それらは、ラジアルラインではなく、円の円周に沿って配置されるその色の停止の放射状勾配とは異なります。
conic勾配の構文により、開始角と中心位置の仕様が可能になります。省略した場合、これらはそれぞれゼロと中心にデフォルトです。最初と最後の色のカラーストップ角度は、指定されていない場合は0DEGおよび360DEGであると想定されています。
• Conic勾配を使用して、異なる色にハードカラーストップ値を提供することにより、パイチャートを作成できます。グラデーションの各色には、開始角と終了角を与えることができ、異なるセクターの形成につながります。これらのカラーストップ値を指定する2つの方法が存在します。各色の開始角度をゼロに設定するか、次の色の開始角を前の色の端角に等しく設定します。
繰り返す円錐勾配は、通常の円錐勾配と同じ値を受け入れますが、360度全体がカバーされるまで繰り返します。これは、以前に画像の使用を必要とする一般的な画像パターンを作成するために使用できます。
ますます多くのWebサイトが勾配を何らかの形で使用しています。いくつかのWebサイトはそれらをナビゲーションコンポーネントに使用しますが、他のWebサイトはボタンなどの要素でそれらを使用したり、画像を使用していくつかの素晴らしい効果を作成したりします。
• すべてのブラウザは、基本的なCSS線形勾配と放射状勾配を長い間サポートしています。 CSSグラデーション：SitePointの構文クラッシュコースの記事では、線形および放射状の勾配を作成するために必要な構文の簡単な要約と、繰り返し勾配を使用して基本的なパターンを作成する方法を提供します。可能な場合はいつでも画像を使用しないようにしてください
線形勾配と放射状勾配の後、ブラウザはゆっくりとゆっくりとコニック勾配をサポートし始めました。これは、Lea Verouによって最初に擁護されました。

この記事では、単純な円錐勾配と繰り返しコニック勾配の構文、使用、およびブラウザのサポートについて学びます。

円錐勾配とは？

conicおよびradial radial勾配は、それらの両方がそれらを描くために使用される円の中心として指定されたポイントまたはデフォルトポイントから始まるという意味で類似しています。 2つの違いは、放射状勾配の場合、色の列が放射状のラインに沿って配置され、円錐勾配の場合、カラーストップは円の円周に沿って配置されることです。

円錐勾配のカラーストップの位置は、パーセンテージまたは学位のいずれかで指定できます。 0％または0DEGの値は、円錐勾配の上部を指します。時計回りに移動すると、値は徐々に増加し続けます。 360DEGの値は0DEGに相当します。カラーストップ値が100％または360°を超える色は、円錐勾配に描かれませんが、それでも色の分布に影響します。

次の画像は、黄色から始まりオレンジで終わる円錐形の勾配を示しています。

360 degのオレンジを0 degの黄色から分離する鋭い遷移に気付かないのは難しいです。円錐勾配の開始および終了色が非常に異なる場合は、円錐勾配が常にこの遷移を生成することを忘れないでください。それを避けるための1つの方法は、開始色と終了色を同じ値に設定することです。 円錐勾配の構文

conic勾配を使用すると、開始角と中心的な位置を指定できます。これらの値を省略すると、角度はデフォルトでゼロになり、位置はデフォルトで中心になります。これは、円錐勾配の構文です：

最初と最後の色のカラーストップ角は、指定されていない場合、それぞれ0DEGと360DEGであると想定されます。前のセクションからの黄色のオレンジ色の円錐勾配は、次のバージョンのいずれかを使用して作成できます。

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

学位を使用する代わりに、パーセンテージを使用することもできます。先に述べたように、100％の値は360°に等しくなります。したがって、50％の値は180°に等しくなります。特定の色でカバーしたい円のどの部分を正確に知っている場合、パーセンテージを使用する方が簡単かもしれません。同様に、円錐勾配の中心位置は、パーセンテージの観点からも指定できます。上記の円錐勾配値のいずれかが次の結果を生み出します。

CodepenでSitePoint（@SitePoint）による円錐形の勾配を作成するペンを参照してください。

すべてのブラウザが現在カニック勾配をサポートしているわけではないので、最終結果がどのように見えるかを示すために、各例に参照画像を含めます。

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

conic勾配の使用

コニック勾配を使用して、さまざまな種類の色ホイールを作成できます。例として、次のデモでは、円錐勾配の虹の色を使用して、虹の車輪を作成します。

突然の移行を避けるために、円錐形の勾配のスタートとエンドの両方の色をバイオレットに設定した方法に注目してください。

コニック勾配を作成するペンを参照してください - codepenのSitePointによるレインボーホイール（@sitepoint） パイチャートにCSSコニック勾配を使用して

コニック勾配のもう1つの利点は、パイチャートを簡単に作成できることです。パイチャートを作成するプロセスは、実際には非常に簡単です。あなたがしなければならないのは、異なる色にいくつかのハードカラーストップ値を提供することです。グラデーションの各色には、開始角と端の角度を付けることができます。次の色の開始角の値が、現在の色の端角の値以下である場合、それらは非常に鋭く、瞬時の色の変化で表示され、その結果、異なるセクターが形成されます。

これらのカラーストップ値を指定するには、2つの方法があります。最初のものは、各色の開始角を常にゼロに設定することです。

2番目の方法は、次の色の開始角を前の色の端角に等しく設定することです。

最終的にやろうと決めたのは、好みの問題です。

次のコードスニペットは、これらの両方の方法の円錐勾配値を比較のために並べて示しています。

デフォルトではそれぞれ0％と100％に設定されるため、最初の色と最後の色の終了角度の開始角度を省略できます：

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

コニック勾配を作成するペンを参照してください - CodepenのSitePoint（@SitePoint）によるパイチャート。 CSSコニック勾配を使用してドーナツチャートを作成します

ドーナツチャートを作成することは、ハードカラーストップで要素に追加の放射状勾配を適用するだけの問題です。放射状勾配の内側の色は白に設定し、外側の部分を透明にすることができます。

コニック勾配を作成するペンを参照してください - CodepenのSitePointによるドーナツチャート（@SitePoint）。

繰り返し円錐勾配

繰り返しコニック勾配は、通常の円錐勾配と同じ値をすべて受け入れます。唯一の違いは、今回は360度全体がカバーされるまで繰り返し続けることです。この繰り返しを使用して、以前に画像の使用を必要とする一般的な画像パターンを作成できます。

パイチャートを簡単に変更して、スターバーストのような背景を作成できます。あなたがしなければならないのは、繰り返しコニック勾配を使用し、各色セグメントの幅を適切な量だけ減らすことです。

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</angular-color-stop-list></position></angle></span>

同様に、各セクターの幅を25％に設定し、バックグラウンドサイズを設定することにより、チェッカーボードパターンを簡単に作成できます。

次の画像は、長方形または正方形の領域で4つの90度セクターを持つ円錐勾配を拡張することで、チェッカーボードを作成する方法を示しています。

ここに、チェッカーボードパターンを作成するCSSがあります：

CodepenのSitePoint（@SitePoint）のCONIC勾配を繰り返すペンを参照してください。

さまざまなセクターのサイズを変更し、勾配の角度を変更することにより、さらに多くのパターンを作成できます。

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

ブラウザのサポートとポリフィル

この記事を書いている時点で、「実験的なWebプラットフォーム機能」フラグの背後にあるChrome 59およびOpera 46でConic Gradientsがサポートされています。デフォルトまたはいくつかのフラグの後ろで、この新しい標準をサポートする他のブラウザはありません。これは、十分なブラウザのサポートがある前に少し待たなければならないことを意味します。 ただし、Lea Verouによって作成された優れたCSS Conic-Gradient（）Polyfillの助けを借りて、今日からCSSコニック勾配の使用を開始できます。また、CSSファイルに円錐勾配のフォールバックを自動的に追加するPostCSS Conic Gradientプラグインもあります。

最終的な考え

このチュートリアルでは、円錐勾配を使用してパイとドーナツチャートを作成する方法を示しました。その後、Conic勾配を繰り返すのを使用して、CSSのみを使用してさまざまな背景パターンを作成する方法を学びました。ブラウザのサポートが十分に優れていると、これらのタスクを達成するために大きなライブラリや画像に頼る必要がなくなります。

コニック勾配の詳細については、これらのリソースをお見逃しなく：

CSSCONF EU 2015のLea Verouの講演

CSS画像値と置き換えられたコンテンツモジュールレベル4

のCSS勾配セクション

Lea Verouの最初のドラフト仕様。2011年にさかのぼります。

Web上のConic Gradientsのユニークな用途を提案できますか？コメントでお知らせください。

CSSコニックグラデーションとパイチャートに関するよくある質問（FAQ）

CSSコニック勾配のカラーストップ値の重要性は何ですか？

• CSSコニック勾配のカラーストップ値は、勾配内の各色の位置を決定するために重要です。パーセンテージまたは角度として表されます。たとえば、25％または90 degのカラーストップ値は、色が円の周りの途中またはそれぞれ90度で終わることを意味します。これらの値を操作することで、ユニークなグラデーション効果を作成できます。

  円錐形の勾配で色の間にスムーズな遷移を作成するにはどうすればよいですか？

  円錐勾配内の色間のスムーズな遷移を作成するには、複数のカラーストップ値を使用できます。カラーストップを近くに配置することにより、色の間に滑らかで段階的な移行を作成できます。カラーストップが近づくと、遷移が滑らかになります。

  CSSコニック勾配を使用してパイチャートを作成できますか？どのように？

  はい、CSSコニック勾配を使用してパイチャートを作成できます。異なるカラーストップ値を設定することにより、パイチャートに似た異なる色のセクションを作成できます。次に、これらのセクションを使用して異なるデータポイントを表すことができます。

  Conic Gradientsが一部のブラウザに正しく表示されないのはなぜですか。たとえば、Internet ExplorerやMicrosoft Edgeのいくつかのバージョンはそれらをサポートしていません。すべてのブラウザに勾配が正しく表示されるようにするには、フォールバックのバックグラウンドカラーまたはポリフィルの使用を検討してください。中心点を放射する勾配CSSラジアル勾配は、中心点から放射する勾配を作成します。ラジアル勾配を作成するには、conic-gradient（）関数の代わりにradial-radient（）関数を使用します。円錐勾配を持つCSS変数を使用できます。これにより、よりダイナミックで柔軟なスタイルを作成できます。特定の値でCSS変数を定義し、コニック勾配でその変数を使用できます。 CSSアニメーションまたはトランジション。たとえば、勾配の回転をアニメーション化するか、カラーストップ値をアニメーション化して、時間の経過とともに変化する勾配を作成できます。 >はい、CSSコニック勾配で透明な色を使用できます。これにより、透明性にフェードする勾配などの興味深い視覚効果が生じる可能性があります。

  繰り返しコニック勾配を作成するにはどうすればよいですか？

  繰り返しコニック勾配を作成するには、繰り返しを使用できます。 conic-gradient（）関数。これにより、円の周りに繰り返される勾配パターンを作成できます。たとえば、Conic Gradientをテキスト要素の背景として使用してから、色、フォントサイズ、テキストシャドウなど、そのテキストに他のCSSプロパティを適用できます。

以上がパイチャートなどのCSSコニック勾配を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。