グラスモーフィズムジェネレーター

backdrop-filter:blur() は、曇りガラスの外観の背後にある CSS プロパティです。これは、単に単色をフェードさせるのではなく、その後ろに移動するものをぼかす半透明のパネルです。問題は、ぼかしの品質を静的なスウォッチに対して判断するのはほぼ不可能であるということです。コンテンツ、ビデオ、またはアニメのヒーローが含まれる実際のページ上で動作する場合と同様に、その下で何かが実際に動いている場合にのみ、説得力のあるものとして読み取れます。このジェネレーターは、プレビュー カードを静止背景ではなく実際にアニメーション化された背景上に配置するため、スライダーをドラッグしているときに表示されるものが、訪問者が実際に体験するものになります。

背景は実際の CSS アニメーションです。要素のサイズの 400% で描画された大きな線形グラデーションで、@keyframes によって背景位置がループ上で前後に移動します。JavaScript アニメーション ループやキャンバスはなく、プロダクション ヒーロー セクションで使用されるのと同じ連続的な背景位置テクニックだけが使用されます。ぼかし、色合いの色と不透明度、境界線のハイライトの色/不透明度/幅、角の半径と影の柔らかさはすべて、フローティング カードのライブ スタイルを制御し、コピー可能な CSS ボックスはまったく同じ値を反映します。

すべてのブラウザが backdrop-filter をサポートしているわけではないため、ジェネレーターは実際の @supports not (backdrop-filter: Blur(1px)) ブロックも生成します。トークン ジェスチャではなく、実際の色合いの不透明度から計算された独自の背景色を持つフォールバック ルールです。ぼかしなしの半透明度は著しく悪く見えるため (ぼかしなしで背後にあるものはすべて表示されます)、フォールバックによって自動的にアルファ チャネルが選択した色合いの不透明度よりも高くなります。生成された CSS 内のコメントには、その理由とその程度が正確に説明されます。

すべてが独自のブラウザ内で計算およびレンダリングされます。アップロードやアカウント、サーバーの往復は必要ありません。カードが適切に表示されたら CSS をコピーし、写真、ビデオ、またはグラデーションの上に置きたい要素にドロップし、@supports ブロックを維持して、古いブラウザーでもかろうじて見えるカードではなく、読みやすく不透明なカードを取得できるようにします。