Teknik1 dk okuma
Modern Glassmorphism & Canlı Backdrop-Filter Sanatı
Puslu cam efektiyle arayüzlere derinlik katmanın incelikleri, doygunluk ve kenar ışıması rehberi.
Glassmorphism, arayüz tasarımında doğru kullanıldığında derinlik ve şıklık katar. Ancak düz bir gri arka plan ve basit bir blur(10px) genelde çamurlu ve soluk bir görüntü yaratır.
İnteraktif Cam Stüdyosu
Aşağıdaki canlı stüdyoda bulanıklık (blur), saydamlık (opacity), renk doygunluğu (saturate) ve kenar ışımasını canlı olarak test edebilir ve CSS kodunu alabilirsiniz:
Canlı Buzlu Cam (Glassmorphism) Stüdyosu
Bulanıklık, doygunluk ve kenar ışımasını canlı ayarlayın
✨
Modern Cam Panel
Canlı Katmanlı Render
Arka plandaki renklerin buzlu cam arkasından nasıl doygun ve organik şekilde kırıldığını gözlemleyin.
Blur (Bulanıklık)16px
Opacity (Saydamlık)%40
Saturate (Doygunluk)%140
Kenar Saydamlığı%25
Kaliteli Bir Cam Efekti İçin 3 Püf Noktası
- Doygunluğu Artırın (
saturate): Arka plan bulanıklaşırken renkler solabilir.saturate(130%)eklemek renklerin canlı kalmasını sağlar. - Hafif Beyaz Kenarlık (Border):
1px solid rgba(255, 255, 255, 0.2)camın kenarlarını belirginleştirerek gerçek bir cam hissi verir. - Safari Desteği:
-webkit-backdrop-filterönekini mutlaka eklemelisiniz.