CSSフィルタージェネレーター

すべての CSS フィルター ジェネレーターでは、blur()、brightness()、contrast() などをスタックできますが、ほとんどのフィルターは 1 つの固定シーケンスでのみフィルターを適用するため、順序が重要になるものはほとんどありません。これは異なります。フィルター チェーンは、ネイティブ HTML5 のドラッグ アンド ドロップで構築された実際の並べ替え可能なリストであり、2 つの関数を並べ替えると、本番環境の CSS とまったく同様に、レンダリングされるピクセルが変更されます。 Blur-then-hue-rotate は、hue-rotate-then-blur とは見た目が異なりますが、出荷前にその理由がわかるようになりました。

独自の写真をアップロードすると、ぼかし、明るさ、コントラスト、彩度、色相回転、セピア、グレースケール、反転、ドロップシャドウの 9 つのチェーン可能な関数が、シミュレートされたスウォッチではなく、`<img>` 要素の実際の `filter` CSS 宣言としてライブで写真に適用されます。選択から関数を追加し、その行をリスト内で上下にドラッグしてチェーン内の位置を変更し、スライダーを調整します。プレビューとコピー可能な `filter: ...;` 行が入力ごとに更新されます。行内の独自のボタンを持つステップを削除します。

2 番目の小さいチェーンは、プレビューの上に配置されたオーバーレイ パネルに適用される「背景フィルター」値を構築します。これにより、下にある画像自体のフィルター チェーンに触れることなく、すりガラス効果 (最新の半透明ナビゲーション バーやモーダル背景の背後にある技術) を確認できます。写真をアップロードする前でも、カラフルなプレースホルダーの背景に対して機能するため、数秒でつや消しパネルのデザインをダイヤルインできます。

プレビューが正しく表示されたら、出力ボックスから CSS を直接コピーするか、実際の PNG をエクスポートします。同じフィルター文字列が Canvas 2D コンテキストの `ctx.filter` プロパティに渡され、CSS の `filter` プロパティと同じ構文が使用されます。そして、キャンバスは `canvas.toBlob()` でダウンロード可能なファイルに変換されます。エクスポートされたイメージは、同じレンダリング プリミティブを介して実行される同じフィルター文字列によって生成されるため、ライブ プレビューと正確に一致します。すべてはブラウザ内でローカルに行われます。あなたの写真はどこにもアップロードされません。