sıvı cam
kırılması

HTML ve CSS ile arka plan kırılmasını (backdrop displacement) nasıl oluşturursunuz? SVG ile. Temel prensip, altındaki görüntüyü büken dinamik bir yer değiştirme haritasına (displacement map) ihtiyaç duymanızdır. Bu durumda, elemanımızın arka planı (yani altında kalan her şey) fiziksel bir cam mercek gibi gerçek zamanlı olarak kırılır.

Kullanılan yer değiştirme haritasını görmek ve parametrelerle oynamak için kontrol panelindeki "Hata Ayıklama (Debug)" seçeneğini açın. Haritadaki kırmızı ve mavi renk gradyanları arka planı büker. Peki dikkat edilmesi gerekenler? Elemanın şekli her değiştiğinde harita görselini dinamik güncellemeniz gerekir. En önemli kısıt mı? backdrop-filter: url() şu an sadece Chromium tabanlı tarayıcılarda çalışır, Gecko ve WebKit henüz tam desteklemez.

Sıvı cam efekti, farklı yüzeyler ve kullanım senaryolarına göre kendini adapte eder.
Farklı modları deneyin veya "Serbest (Free)" modunda parametreleri dilediğiniz gibi şekillendirin.

İşte bu kadar! SVG filtrelerinin gücünü keşfedin ve deneyler yapın.
Ama belki önce Safari ve Firefox'ta test etmeyi unutmayın.