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

CSS フィルター ジェネレーターは、CSS フィルター プロパティのビジュアル エディターです。フィルター機能 (ぼかし、明るさ、コントラスト、飽和、グレースケール、セピア、反転、色相回転、不透明度) ごとにスライダーを移動し、エフェクトがプレビューに適用されるのをリアルタイムで確認し、生成された正確な CSS をコピーします。

フィルター プロパティは、ぼかし、色の移動、コントラスト調整などのグラフィック効果をブラウザーに直接適用し、画像エディターは必要ありません。複数の関数を 1 つの宣言で連鎖させることができ、順番に適用されます。これにより、ヴィンテージ、ウォーム、ドラマチックなどの写真スタイルの外観が構築されます。このツールはその連鎖を管理し、変更した関数のみを出力するため、CSS をクリーンに保ちます。

すべてはブラウザで行われます。 vintageプリセットでページが開きます; 別のプリセットを選択し、各機能を微調整し、宣言をコピーします。アカウントもアップロードもせず、ページがロードされるとオフラインで動作し続けます。

こちらが暖かい写真ルックのCSSフィルタジェネレータです。 「暖かい」プリセットをクリックし、「生成されたCSS」はフィルタを読み取ります: brightness (105%) saturate (140%) sepia (25%); プレビューが琥珀色にシフトします。 「Blur」を2pxにドラッグすると、ラインはフィルタになります: blur (2px) brightness (105%) saturate (140%) sepia (25%); 「なし」をクリックするか、「リセット」を押すと、フィルタに戻ります: none; プレビューは独自の写真ではなく固定カラーサンプルであるため、コピーしたCSSを出荷する前に実際の画像で確認してください。

フィルターは書き込まれた順序で適用され、順序は結果を変更します: グレースケール それからセピアはセピア それからグレースケールと同じではありません、なぜなら最初のものは2 番目の色が着色する色を削除するからです 知る価値のあるgotchaは視覚的ではなく構造的です。 none以外のフィルターを持つ要素はすべて、その固定された絶対的に配置された子孫のための包含ブロックになるので、フィルターをかけられた親の中のドロップダウンまたはモーダルは、ビューポートの代わりにその親に対してそれ自身を位置決めします また、新しいスタッキングコンテキストも作成します、それは以前に機能したzインデックスの順序付けを破ることができます フィルターが外観とは無関係に見える方法でレイアウトを破る場合、それはほとんど常に理由です フィルターはほとんどのブラウザーでGPUで高速化されますが、大きな要素上の大きなぼかし半径は高価なままです このツールは常に1 つの固定された順序で関数を書き込み、最初にぼかし、最後に不透明度なので、グレースケールの前にセピアを生成することはできません; それが必要な場合はコピーした後、手で関数を並べ替えます。