1つの勾配のみを使用するCSSトリック

CSSグラデーションは、フロントエンド開発の定番であり、多用途のスタイリングオプションを提供します。それらの構文は複雑になる可能性がありますが、この記事では、Just One勾配で達成可能な驚くべきパワーとシンプルさを探ります。 基本的な用途を超えて移動して、パターン、グリッドライン、破線、虹の効果、ホバーアニメーション、形状、ボーダーイメージのトリックを作成するための高度なテクニックのロックを解除します。 単一の勾配が制限されているという概念を忘れてください。 その可能性を探りましょう：

繰り返しパターンの生成

勾配は、繰り返し可能なパターンの作成に優れています。 ここでは

関数が重要です。 単純なチェッカーボードパターンは、次のもので実現されます

repeating-conic-gradient()カラーストップの調整により、さまざまな結果が得られます。 たとえば、色の半分の停止（25％から12.5％、50％から25％）が三角形のパターンを作成します。 CSS変数を使用すると、柔軟性が向上し、色とサイズの簡単なカスタマイズが可能になります。 一時的に繰り返しを無効にすることで、より複雑なパターンを視覚化することができます（

）単一のタイルを分離します。 パターン作成へのより深いダイブについては、これらのリソースを参照してください。

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

CSS＆conic-gradient（Verpex blog）を使用して背景パターンを作成する方法no-repeat

バックグラウンドパターン（FreeCodecamp）を構築することにより、CSSラジアル勾配を学習します

• 背景パターン、円錐勾配（ana tudor）
によって簡素化されました
• 動的グリッドの構築
パターンの概念を拡張して、柔軟なグリッドを作成します。 CSS変数は、厚さ、細胞数、およびサイズを制御します

edgeの完全な線を保証します。 応答性の高いグリッドは、

を削除し、

を使用して使用可能なスペースに基づいて列カウントを動的に調整することで可能です。 将来のプルーフには、

.grid-lines {
  --n: 3; /* rows */
  --m: 5; /* columns */
  --s: 80px; /* size */
  --t: 2px; /* thickness */
  width: calc(var(--m)*var(--s) + var(--t));
  height: calc(var(--n)*var(--s) + var(--t));
  background: conic-gradient(from 90deg at var(--t) var(--t), #0000 25%, #000 0) 0 0/var(--s) var(--s);
}

：

var(--t)の使用が含まれます --m破線の作成width: calc(round(down, 100%, var(--s)) var(--t)); calc-size()垂直または水平の破線は簡単に作成されます：width: calc-size(auto, round(down, size, var(--s)) var(--t));

水平バージョンを作成する実験。 破線のラインとグリッドを組み合わせるには、著者のCSSシェイプコレクションで詳述されているように、2つの勾配が必要です。

虹の効果の生成

滑らかな虹のグラデーションを作成するには、巧妙なアプローチが必要です：

.dashed-lines {
  --t: 2px;  /* thickness */
  --g: 50px; /* gap */
  --s: 12px; /* dash size */
  background: conic-gradient(at var(--t) 50%, #0000 75%, #000 0) var(--g)/calc(var(--g) + var(--t)) var(--s);
}

はHSLカラースペースの補間を活用し、単一の色からフルスペクトルを作成します。 同様に、カラーホイールは

で作成されます

ホバーエフェクトの実装

background: linear-gradient(90deg in hsl longer hue, red 0 0);

グラデーションは、擬似要素の必要性を置き換えるエレガントなホバー効果を提供します。 スライドの下線の例：in hsl longer hue

background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 / 100px 100px;

複雑な形状を作成

勾配は、驚くほど複雑な形状を作成することに熟達しています。 Zig-Zagの境界線、すくい上げられた角、輝き、アイコン（プラスサインなど）を生成するためのテクニックは、著者の「CSSシェイプを作成するためのモダンなガイド」（Smashing Magazine）とCSS Shape Collectionに詳述されています。

ボーダーイメージのトリックを利用

プロパティは、グラデーションと組み合わせて、さらに創造的な可能性を解き放ちます。 例には、グラデーションオーバーレイ、全幅の背景、見出し分割、リボンが含まれます。 これらの効果は伝統的に複雑な回避策を必要としていましたが、最新のCSSはプロセスを簡素化します。 border-image結論

単一勾配のテクニックの習得により、CSS機能が拡張されます。 この記事では単一の勾配に焦点を当てていますが、複数の勾配を組み合わせるとさらに大きな可能性がなくなることを忘れないでください。 重要なのは、グラデーションの動作を理解して革新的で効率的なCSSソリューションを作成することです。

以上が1つの勾配のみを使用するCSSトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。