Viking（@vikingmute）のスレッド

今日のベスト記事: ブラウザでLiquid Glassのすりガラス効果を実装する kube.io/blog/liquid-gl… これは純粋なCSSとSVGエフェクトを使用しています。ぜひ学ぶ価値があります。 最大の特徴は、サードパーティ製のライブラリを一切使用していないことです。光の変位は、屈折の物理法則（スネルの法則）に基づいて完全に計算され、SVGフィルターを用いて背景を歪ませることで、「曲面ガラスを通してコンテンツを見ている」ようなリアルな歪み効果を実現します。また、エッジハイライトも追加されているため、AppleのLiquid Glassに非常によく似た視覚効果が得られます。 エフェクトは本当に素晴らしく、信じられないほど洗練されており、歪みも非常にリアルです。記事内のインタラクティブデモ、または私のスクリーンレコーディングをご覧ください。 彼らがどのようにしてこれらの効果を思いついたのか、また、その背後にある基本原理を理解するためにどのような知識を学ぶ必要があるのか​​はわかりません。