CSSペイントAPIの探索：丸めの形

CSSを使用した複雑な形の丸い角をマスターするのは難しい場合があります。 CSSペイントAPIは、エレガントなソリューションを提供します！ 「CSS Paint APIの探索」シリーズの一部であるこの記事は、これを達成する方法を示しています。

CSSペイントAPIシリーズの探索：

• パート1：画像断片化効果
• パート2： BLOBアニメーション
• パート3：ポリゴンボーダー
• パート4：丸め形（この記事）

現在Chrome and Edgeでサポートされているこの手法は、CSSのみのアプローチを提供し、メンテナンスとコードの理解を簡素化します。

ペイントAPIの代替

複雑な形状を丸めるための他の方法は存在しますが、多くの場合、SVGを含み、調整と保守性のための課題を提示します。これらには以下が含まれます：

clip-path: path()

このSVGベースのアプローチは、形状が事前に定義されている場合は簡単ですが、曲率またはサイズを変更するには、複雑なパス編集が必要です。

SVGフィルター

Lucas BebberのGooey Effectチュートリアルに見られるように、SVGフィルターを使用すると、コーナーの丸めが可能になります。ただし、調整のために重要なSVGの専門知識が必要です。

Ana TudorのCSSのみの方法

Ana Tudorの革新的なCSSのみのテクニックは代替品を提供しますが、特に透明性や画像では、さまざまなシナリオを実装および調整することが複雑になる可能性があります。

CSSペイントAPIソリューション

CSSペイントAPIは、より管理しやすいソリューションを提供します。このアプローチは、前の記事のポリゴン境界の例と同様の構造を活用しています。

CSSセットアップ

単純な長方形から始めて、 clip-path: polygon()と同様に、 --path変数を使用して形状を定義します。 Clippyは、これらのパスの生成を支援できます。

 。箱 {
  ディスプレイ：インラインブロック。
  高さ：200px;
  幅：200px;
   - パス：​​50％0,100％100％、0 100％;
   - ラディウス：20px;
  -webkit-mask：ペイント（丸い形）;
}

--path変数は形状を定義し、 --radiusコーナーの曲率を制御します。

JavaScriptの実装

JavaScriptコードは、パスセグメントにミッドポイントを追加し、 arcTo()関数を使用して滑らかな丸い角を作成します。 arcTo()の制御ポイントの使用を理解することが重要です。コードはポイントを繰り返し、中点を計算し、 arcTo()を適用して丸い形状を生成します。半径値が大きいオーバーフローを防ぐために、半径制限が実装されています。

（JavaScriptコードは簡潔に省略されていますが、元の記事で詳しく説明しています）

最後のステップでは、形状を充填またはstrで行い、目的の視覚効果を実現します。

欠点とソリューション

主な欠点は、ホバイル可能な領域（マスクを使用して相互作用に影響する）と、大きな半径の値を持つ潜在的なオーバーフローです。ホバイル可能なエリアの問題は、境界線の擬似要素に2番目のマスクを使用して対処され、オーバーフローの問題は、形状のジオメトリに基づいて半径を動的に制限することによって処理されます。

機能の拡張

--path変数は、各コーナーの個々の半径値を受け入れるように強化され、より詳細な制御を提供します。

例

いくつかの例は、この手法の汎用性を示しています：CSS形状、音声泡、フレーム、セクション仕分け、ナビゲーションメニュー、グーイ効果、形状のモーフィング。これらの例は、視覚的に魅力的で簡単に保守可能なデザインを作成するためのCSSペイントAPIのパワーと柔軟性を示しています。

結論

CSSペイントAPIは、複雑な形状に丸い角を作成し、従来のCSSとSVGアプローチの限界を克服するための強力で効率的な方法を提供します。その単純な実装と柔軟性により、最新のWebデザインにとって貴重なツールになります。

以上がCSSペイントAPIの探索：丸めの形の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。