CSSペイントAPIでドロップシャドウをシミュレートします

ほとんどのフロントエンド開発者はbox-shadow CSSプロパティに精通しています。効果的ですが、ShadowsはCSSボックスモデル内に課題を提示します。要素の寸法に影響を与えず、親のオーバーフロー設定によって簡単にクリップされます。回避策は存在しますが、新興のCSS Houdini仕様はエキサイティングな選択肢を提供します。特にCSSペイントAPIは、実行時にプログラムの画像生成を可能にします。それを使用して、ボーダー画像に統合された洗練された影を作成しましょう。

Houdiniを垣間見る

Houdiniは、ブラウザのペイントプロセスへのアクセスを強化します。これは、CSSエンジンの部分を露出させる低レベルのAPIのスイートであり、ブラウザのレンダリングエンジンのスタイリングとレイアウトと対話することにより、開発者がCSSを拡張できるようにします。

CSSペイントAPI

W3C候補の推奨であるCSS Paint APIは、ブラウザトラクションを獲得したHoudiniの最初のAPIの1つです。現在、ChromeとEdgeは完全なサポートを提供していますが、Safariにはフラグが必要であり、Firefoxはプロトタイピングに適していると考えています。サポートされていないブラウザー用のポリフィルが存在します（IE11を除く）。 Chromiumで有効になっている間、 paint()関数に引数を渡すには、実験的なWebプラットフォーム機能が有効になる必要がある場合があることに注意してください。

私たちのアプローチ：影の統合

影の画像を生成し、 border-imageとして適用します。影や縁とは異なり、影は要素の寸法を本質的に増やさないでください。私たちのアプローチは、影を要素の境界に直接埋め込み、いくつかの利点を提供します。

1. border-width要素の全体的な寸法に貢献します。
2. コンテンツは影の重なりを避けます。
3. パディングは余分な幅を必要としません。
4. マージンは兄弟の要素を妨害しません。

border-imageプロパティは、角と側面に画像スライスを使用します。 CSSペイントAPIはこの画像を生成し、複数の影を重ねます。

プロセスには次のものが含まれます。

1. ターゲット要素のHTMLとCSSをセットアップします。
2. 画像を描画するモジュールを作成します。
3. モジュールをペイントワークレットにロードします。
4. paint()関数を使用してCSSのワークレットを呼び出します。

キャンバスの準備

CSSペイントAPIはHTMLと同様に機能します<canvas></canvas>要素。キャンバスとして300x300 divを作成します。

<div class="foo"></div>

スタイル：

 .foo {
  境界線：15pxソリッド#EFEFEF;
  ボックスサイズ：ボーダーボックス;
  高さ：300px;
  幅：300px;
}

ペイントクラスの構築

HTTPSは、塗装ワークレットを含むJavaScriptワークレットに必須です。

次に、モジュール（ registerPaint()を使用した簡単なファイル）を作成します。この関数は、ワークレットの名前と絵画の論理を含むクラスを取得します。

 RegisterPaint（
  "影"、
  クラス {
    static get inputProperties（）{
      return [" -  shadow-colors"、 "background-color"、 "border-top-width"];
    }
    static get inputarguments（）{
      戻る ["<integer> "、"<integer> "、"<integer> "];
    }
    ペイント（コンテキスト、サイズ、小道具、args）{
      //ここにロジックのペイント...
    }
  }
）;</integer></integer></integer>

inputPropertiesアクセス（カスタムおよび標準）にCSSプロパティを指定します。 inputArguments （現在、一部のブラウザのフラグの背後にある）によりpaint()関数に直接引数を渡すことができます。 paint()メソッドは、提供されたコンテキスト、サイズ、プロパティ、および引数を使用して描画します。

paint()メソッドの実装

内部paint() 、境界幅の寸法を調整します。

 const width = geom.width -borderwidth * 2;
const height = geom.height -borderwidth * 2;

プロパティと引数にアクセスします。

 const borderwidth = props.get（ "border-top-width"）。value;
const Shadowcolors = props.getAll（ " -  Shadow-Colors"）;
ctx.fillstyle = props.get（ "background-color"）。toString（）;

const blurarray = args [2] .toString（）。split（ /\ s /）;
const xarray = args [0] .toString（）。split（ /\ s /）;
const yarray = args [1] .toString（）。split（ /\ s /）;

次に、影を描きます。

 ShadowColors.Foreach（（ShadowColor、index）=> {
  ctx.shadowoffsetx = xarray [index];
  ctx.shadowoffsety = yarray [index];
  ctx.shadowblur = blurarray [index];
  ctx.shadowcolor = shadowcolor.toString（）;
  ctx.fillrect（境界幅、境界幅、幅、高さ）;
}）;

これは、影の色を繰り返し、影のプロパティを設定し、満たされた長方形を描画します。 Canvas Drop-Shadowフィルターを使用するなど、代替方法も可能です。

登録と適用

ペイントモジュールを登録してください：

 css.paintworklet.addmodule（ "path/to/your/module.js"）;

カスタムプロパティを登録します（オプションですが推奨）：

 css.registerProperty（{
  名前： "-hadow-colors"、
  構文： "<color> 「、
  initialValue：「黒」、
  継承：false
}）;</color>

最後に、CSSに塗装機能を適用します。

 .foo {
  ボーダーイメージソース：ペイント（影、0 0、8 2 1、8 5 3）15;
  Border-Image-Slice：15;
}

devicePixelRatioとcalc()を使用して適切なスケーリングのために、デバイスピクセル比を処理することを忘れないでください。フォールバック（パディング、マージン、勾配、擬似エレメント）は、より広いブラウザの互換性にとって非常に重要です。

結論

CSSペイントAPIは、カスタムエフェクトを作成する強力な方法を提供しますが、ブラウザのサポートを検討し、適切なフォールバックを提供することが重要です。より単純なソリューションよりも複雑ですが、視覚的要素を正確に制御し、シャドウエフェクトを超えて創造的な可能性を開きます。

以上がCSSペイントAPIでドロップシャドウをシミュレートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。