Css filter プロパティはスタイリングのショートカットのように見えます: 1 行で写真を白黒にしたり、背景をぼかしたり、サムネイルを温めたり、画像エディターは関係ありません。また、ブラウザーが適用される要素の位置やレイヤーの配置も変更されるため、ホバー効果のために追加されたフィルターを使用すると、ドロップダウンを 3 つのコンポーネントから静かに分解できます。
このガイドでは、各フィルター関数がピクセル値に対して何を行うのか、同じ関数が異なる順序で異なる画像を生成する理由、フィルターがレイアウトとアニメーションでどのように動作するか、およびコストパフォーマンスの無料を使用します CSS フィルター ジェネレーター 宣言を構築するには、すべての例をプレーン CSS にします。どこにでも貼り付けることができます。
tl;dr: Css
filterプロパティは、関数の記述順に、要素とその内部のすべてのものに、ぼかし、明るさ、コントラスト、グレースケール、セピア、飽和、反転、色相回転、不透明度などのグラフィック効果を適用します。以外の値noneまた、スタッキングコンテキストを作成し、固定された絶対的に配置された子供のための包含ブロックになります。これは、" の通常の原因です。 my モーダルはカード" の中にスタックします。 Toolz CSS フィルター ジェネレーターは、スライダーとライブ プレビューを使用して宣言を構築し、変更した関数のみを書き込み、クライアント側で無料でサインアップを実行します。
CSS フィルター プロパティとは何ですか?
CSS filter プロパティは、ページに描画される前に要素に画像処理エフェクトを適用します。 element's レンダリング全体をカバーするエフェクト: その背景、境界、テキスト、画像、子要素。 W3C で定義されています フィルター効果モジュール レベル 1 そして、現在のすべてのブラウザでサポートされています; the フィルターの MDN リファレンス 互換性の詳細をリストします.
宣言は、フィルタ関数のスペース区切りのリストです:
img.hero {
filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}
関数は左から右に実行されます それぞれが前のものの出力を入力として受け取ります これがなぜ順序が重要なのかを理解する鍵となります。
フィルターは画像ファイルを変更しません。ブラウザーはペイントするたびにフィルターを適用するため、オリジナルはそのまま残され、CSS の 1 行でエフェクトを変更または削除できます。
各フィルター機能は何をしますか?
各関数には要素を変更しないままにする identity 値があります。 Toolz ジェネレーターは出力を短く保つためにそれを使用します。 identity 値に残っている関数は CSS から省略されます。
| 機能 | それが何をするか | アイデンティティ | ジェネレータースライダーの範囲 |
|---|---|---|---|
blur() |
指定された半径のガウスぼかし | 0px |
0 から20pxまで |
brightness() |
各カラーチャンネルをマルチプライミングします | 100% |
0 ～ 200% |
contrast() |
チャンネルを中間のグレーから遠ざけたり、中間のグレーに向かって押し出したりします | 100% |
0 ～ 200% |
saturate() |
色の強度が増減します | 100% |
0 ～ 200% |
grayscale() |
等輝度のグレーに向かってブレンドします | 0% |
0 ～ 100% |
sepia() |
温かみのある茶色にブレンド | 0% |
0 ～ 100% |
invert() |
各チャンネルを反対側に向けます | 0% |
0 ～ 100% |
hue-rotate() |
カラーホイールの周りで色を回転させます | 0deg |
0 から360degまで |
opacity() |
要素をより透明にします | 100% |
0 ～ 100% |
仕様では、次のようなこれらの範囲の一部を超える値が許可されています brightness(300%)。 スライダーは写真スタイルの調整に役立つ範囲をカバーします。 CSS に大きな値を手で入力できます。
スペックも定義します drop-shadow()、ジェネレーターに含まれないもの。 とは異なる box-shadow、 drop-shadow() 要素& #39; s 長方形のボックスではなく、PNG アイコンなどの透明な画像の目に見える形状に従います。長方形の影の場合は、 ボックスシャドウガイド より柔軟な特性をカバーします。
カラーフィルターはピクセル値をどのように変更しますか?
ほとんどのカラーフィルターは、赤、緑、青のチャンネルで単純な算術演算を行い、それぞれを0 から1 までの数値として扱います。 「フィルター効果」の仕様では、それぞれを数式または3 x 3 の行列として定義し、いくつかの色について処理することで、予測可能になります。
明るさ(150%) すべてのチャンネルに1.5 倍します。 rgb (100、100、100) の中間の灰色がrgb (150、150、150) になります。 255を超える値がクリップされるため、高輝度ではハイライトが純白に洗い流されます。
コントラスト (200%) (値 - 0.5) × 2 + 0.5 を各チャンネルに適用します。 0.25 (約 64) の濃い灰色は (0.25 - 0.5) × 2 + 0.5 = 0 になり、黒色です。 0.75 の明るい灰色は 1.0 になり、白色です。すべてが真ん中から広がります。
グレースケール(100%) 各ピクセルを輝度に基づいて灰色に置き換え、赤は 0.2126、緑は 0.7152、青は 0.0722 の重みを使用します。純赤、rgb(255、0、0)は 0.2126 × 255 = 約 54 になるため、rgb(54、54、54)。純緑は約 182 のはるかに明るい灰色になります。そのため、グレースケール変換により、緑は赤よりも明るいという感覚が維持されます。
セピア(100%) チャネルにウォームウェイト係数をミックスします。 red 出力の場合、式は 0.393R + 0.769G + 0.189B です。 white は (1, 1, 1) として入力され、roughly (1.35, 1.20, 0.94) として出力され、rgb (255, 255, 239) にクリップされます。: white はかすかなクリームになります。
これらの数値は、仕様' の公式を直接適用することで得られます。画面上では、丸めと色管理により、結果を 1 ～ 2 単位ずつ移動できます。
フィルター関数の順序によって結果が変わるのはなぜですか?
フィルターは順番に適用されるため、各関数は前の関数's出力で動作します。関数がグレースケールで色を削除するなど、情報を削除すると、その後に実行されるものはすべて処理する必要が少なくなります。
ピュアブルー、rgb(0、0、255)を使用し、両方の注文でグレースケールとセピアを 100% 塗布します。
filter: grayscale(100%) sepia(100%);
- グレースケール最初: 青の輝度は 0.0722 なので、ピクセルはすべてのチャネルで 0.0722 の濃いグレーになり、約 rgb (18、18、18) になります。
- セピア秒: 赤は 0.0722 × (0.393 + 0.769 + 0.189) = 0.0975、緑は 0.0722 × 1.203 = 0.0869、青は 0.0722 × 0.937 = 0.0677 になります。
- 結果: について rgb(25、22、17)、非常に暗い暖かい茶色です.
filter: sepia(100%) grayscale(100%);
- まずセピア色: 赤が 0.189、緑が 0.168、青が 0.131、暗褐色になります。
- グレースケール 2 番目: 輝度は 0.2126 × 0.189 + 0.7152 × 0.168 + 0.0722 × 0.131 = 0.170 です。
- 結果: について rgb(43、43、43)、全く色合いのないニュートラルグレー.
同じ 2 つの関数で順序が異なり、一方の結果はトーンされますが、もう一方の結果はトーンされません。一般的なルールは、後の関数で結果に色を付ける場合は最初に色除去関数を入れ、中立的な最終画像が必要な場合は最後に置くことです。
ジェネレータは常に1 つの固定順序で関数を書き込みます: ぼかし、明るさ、コントラスト、飽和、グレースケール、セピア、反転、色相回転、不透明 だからグレースケールは常にセピアの前に来て、トーンバージョンを与える別の順序が必要な場合は、CSSをコピーして、手で関数を並べ替えます。
プリセットは何を生成しますか?
ジェネレータはVintageプリセットで開きます。 これらは、各プリセットが書き込む正確な宣言です:
| プリセット | 生成されたcss |
|---|---|
| なし | filter: none; |
| グレースケール | filter: grayscale(100%); |
| ヴィンテージ | filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%); |
| 暖かい | filter: brightness(105%) saturate(140%) sepia(25%); |
| クール | filter: saturate(120%) hue-rotate(200deg); |
| ドラマチック | filter: brightness(90%) contrast(150%) saturate(120%); |
| 色あせた | filter: brightness(110%) saturate(80%) opacity(80%); |
| 反転 | filter: invert(100%); |
| ぼかし | filter: blur(4px); |
プリセットはスタートポイントです。 「Warm」をクリックしてから「Blur」を2pxにドラッグすると、出力は になります filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);。 「なし」または「リセット」をクリックすると、に戻ります filter: none;。
Cool プリセットは、その名前が示すよりも強力です。200 度の色相回転により、オレンジが青に、青がオレンジに向かって移動します。 "cool" と読みます。暖かい写真では、他のすべての写真では重い色の変化として表示されます。
プレビューは、アップロードではなく、いくつかの形状を持つ青、オレンジ、緑のグラデーションの固定サンプルです。各関数が色、コントラスト、ぼかしをどのように移動するかを示しますが、グラデーションを平坦化するフィルターは実際の画像でコピーされた CSS を常にテストします。肌の色では濁って見える可能性があります。
発電機でフィルターをどのように構築しますか?
- を開きます フィルター CSS ジェネレーター。 Vintageから始まる.
- 必要な外観に最も近いプリセットを選択するか、「なし」をクリックしてフィルターなしから開始します。
- スライダーをドラッグします。移動するとプレビューが更新され、生成された CSS ラインもそれに合わせて更新されます。
- CSS をコピーをクリックして、フルに置きます
filter: ...;クリップボード上の宣言. - 画像または要素のセレクターに貼り付け、実際のページで確認します。
変更された機能のみが出力に表示されるため、Brightness を正確に 100% に戻すと削除されます brightness() 出発せずに線から brightness(100%) 後ろ.
なぜフィルターは固定要素と絶対位置要素を壊すのでしょうか?
なぜなら、任意の filter 以外 none 要素を絶対的かつ固定的な位置付き子孫のための包含ブロックにし、新しいスタッキングコンテキストを作成します。 Filter Effects 仕様には両方が記載されています。これはブラウザのバグではありません。プロパティの定義方法です。
実際には、2 つの古典的なバグが生成されます。
固定されていない固定モーダル。 普通に position: fixed ビューポートに対して要素を相対的に配置します フィルター処理された祖先の中では、代わりにその祖先に対して相対的に配置されます:
.card { filter: grayscale(100%); }
/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }
近所の人の下に隠されたドロップダウン。 フィルタリングされた要素はそれ自体のスタッキング コンテキストになるため、子 z-index: 1000 カードの外側の要素の上に上がることができなくなりました。カード内の一番上にあります。
修正は両方について同じです。 などのより狭い要素にフィルターを適用します img カード自体ではなくカード内部. or render the modal or dropdown outside the filtered element, which is what "portal" components in UI frameworks do. the transform プロパティは同じ containing-block 動作を引き起こすため、 CSS 変換ガイド 両方のプロパティがプレイされているこのバグに遭遇すると便利です。
フィルターは背景フィルターや不透明度とどのように比較されますか?
いくつかの特性はフィルター機能と重複しており、適切な特性を選択すると副作用が回避されます。
| 財産 | 影響 | 通常の使用 |
|---|---|---|
filter |
要素とその内容 | 写真効果、グレースケールのロゴ、画像上のぼかし |
backdrop-filter |
要素の背後にあるものは何でも | 曇らされたガラス パネル、ぼやけたオーバーレイ |
opacity |
要素とその内容 | 要素のフェードインまたはフェードアウト |
filter: opacity() |
要素とその内容 | フィルターチェーンの一部としての透明性 |
mix-blend-mode |
要素がその背後にあるものとどのように融合するか | カラーオーバーレイ、デュオトーン効果 |
backdrop-filter と同じ関数を取ります filter、しかし、要素の後ろの内容にそれらを適用します, これは、どのようにガラスモーフィズムのパネルが下のページをぼかす方法です。 the glassmorphism generator それらの宣言を構築します.
要素を自然にフェードする場合、単純です opacity より明確な選択です. opacity() フィルター チェーンの内部は、すでにフィルターを作成していて、同じ行に透明度が必要な場合に便利です。
CSSフィルターをアニメーション化できますか?
はい. filter はアニメーション可能で、一般的なパターンは、ホバリングすると色に変わるグレースケールのロゴです:
.logo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.logo:hover {
filter: none;
}
ブラウザは間を補間します grayscale(100%) あんど none なぜなら none は、同一性値で一致する関数として扱われます。 補間は、両方の状態が同じ関数を同じ順序でリストするときにきれいに機能します。開始リストと終了リストの順序が異なる場合、結果はスムーズにアニメーション化する代わりにジャンプする可能性があるため、両方の状態を同じ関数順序で記述します。
CSSフィルターは性能を損ねるのか?
フィルターのレンダリング時間はコストがかかり、ぼかしが最もコストがかかります。ブラウザーは通常、GPU 上でフィルターを実行するため、ほとんどのカラー フィルターは安価になります。 blur() 違いは、ぼかし半径と領域のサイズの両方で作業が拡大するため、全画面要素、特にアニメーション化またはスクロール コンテンツの後ろに配置される要素の半径が大きいと、低速デバイスでフレームがドロップされる可能性があります。
実用上の限界:
- 大きな要素ではぼかし半径を小さく保ち、半径自体をアニメーション化しないようにしてください。
- 全ページのラッパーではなく、小さな要素または縮小された画像をぼかします。
- モーションのために、アニメーション化します
transformあんどopacity、どのブラウザが効率的に処理し、フィルタを静的に保つか。 - デスクトップだけでなく、ミッドレンジの携帯電話でテストします。
特定の効果に関するよくある質問
いくつかのエフェクトが頻繁に表示され、書き出されます。
白黒画像: filter: grayscale(100%); 100% 未満の値は多少の色を残します grayscale(50%) 落ち着いた外観を与えます.
テキストの背後にある薄暗くなった背景画像: filter: brightness(60%); 画像要素で. guessing; the ではなく, text contrast afterward をチェックします. カラーコントラストチェッカー WCAG比を与える.
埋め込まれた文書または図のためのラフダークモード: filter: invert(100%) hue-rotate(180deg); 反転は、明暗を反転するが、また、それらの反対に色相を回します; 色相を180 度回転させることは、元の色相に向かって戻ってくるほとんどの色を近似している、と内部の写真は間違って見えるので、それらを除外します。
トーン白黒: filter: grayscale(100%) sepia(60%); 上記を通じて作業したとおりです.
テキスト シャドウや変換を含む CSS ビルダーの完全なセットは、 にあります CSS ツールハブ。
発電機はプライベートですか?
はい.プレビューとCSSはJavaScriptでブラウザで生成されます.何もアップロードされず,そもそもアップロードする画像がなく,ページが読み込まれるとツールはオフラインで動作し続けます.CSSをコピーすると1日の使用制限にカウントされ,コピーが発生したことのみが記録されます.
