円錐形の勾配によって簡素化された背景パターン

Firefoxはコニカルグラデーションをサポートするようになりました！この記事では、円錐形の勾配を使用して背景パターンを簡素化する方法を示します。

Firefox 75から始めて、円錐形の勾配を有効にできます。メソッドはabout:config 、config、 layout.css.conic-gradient.enabledフラグを見つけ、その値をtrueに設定します（デフォルト値はfalse 、doubleclick to switch）。有効になったら、Firefoxの円錐形の勾配でCSSをテストできます。

この記事のいくつかの例は、PolyFillでも適切に機能しますが、Conical GradientsでCSS変数を使用する場合があるため、この機能をネイティブにサポートする必要があります。

円錐勾配の主な利点は、背景パターンを簡素化する能力です。 10年前にLea Verouによって作成された線形勾配パターンライブラリの例を見て、円錐形の勾配でそれらを単純化する方法を見てみましょう。

ピラミッドパターン

元のパターンでは、4つの線形勾配を使用しています。

背景：
  線形勾配（315deg、透明75％、＃d45d55 0）-10px 0、
  線形勾配（45deg、透明75％、＃d45d55 0）-10px 0、
  線形勾配（135deg、＃a7332b 50％、透明0）0 0、
  線形勾配（45DEG、＃6A201B 50％、＃561A16 0）0 0 0＃561A16;
バックグラウンドサイズ：20px 20px;

コードは長く理解しにくいです。円錐形の勾配を使用すると、1つの背景層だけで同じ効果を達成できます。

 $ s：20px;
背景：
  円錐勾配（45degから、 
    ＃561A16 25％、 
    ＃6A201B 0％50％、 
    ＃a7332b 0％75％、 
    ＃d45d55 0％） 
    50％/＃{$ s $ s};

コードはより簡潔で、体積は260バイトから103バイトに減少し、半分以上です。

チェスボードパターン

元のパターンでは、2つの線形勾配を使用します。

バックグラウンドカラー：#eee;
背景イメージ：
  線形勾配（45deg、黒25％、透明25％、 
    透明75％、黒75％、黒）、
  線形勾配（45deg、黒25％、透明25％、 
    透明75％、黒75％、黒）;
バックグラウンドサイズ：60px 60px;
バックグラウンドポジション：0 0、30px 30px;

円錐勾配で単純化した後：

 $ s：60px;
背景：
  繰り返し - コニックグレード（＃000 0％25％、#eee 0％50％） 
    50％/＃{$ s $ s};

コードボリュームは263バイトから73バイトに減少し、70％を超えて減少しました。

斜めのチェスボードパターン

元のパターンは、2つの線形勾配も使用します。

バックグラウンドカラー：#eee;
背景イメージ： 
  線形勾配（45deg、黒25％、透明25％、 
    透明75％、黒75％、黒）、
  線形勾配（-45deg、黒25％、透明25％、 
    透明75％、黒75％、黒）;
バックグラウンドサイズ：60px 60px;

円錐勾配で単純化した後：

 $ s：60px;
背景：
  繰り返しコニック勾配（45degから、 
    ＃000 0％25％、#eee 0％50％） 
  50％/＃{$ s $ s};

コードボリュームは229バイトから83バイトに減少し、3分の2近く減少しました。

ハーフダイヤモンドパターン

元のパターンでは、4つの線形勾配を使用しています：（元のコードと詳細な説明はここで省略されており、コアの結論は保持されます）

Cone Gradientで簡素化した後、コードボリュームは343バイトから157バイトに減少します。

追加例：交差する線の背景

円錐勾配は、複数の線形勾配によってもたらされるために元々必要とされる効果を簡単に実現できます。 （ここでは詳細な説明が省略されており、中核的な結論は保持されます）

要約すると、円錐形の勾配は、背景パターンのCSSコードを大幅に簡素化し、コードの読みやすさと効率を向上させることができます。

以上が円錐形の勾配によって簡素化された背景パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。