Glassmorphism Oluşturucu
Arka fon bulanıklığı, şeffaflık ve kenarlıklarla buzlu cam UI kartları oluşturun, ardından CSS'i kopyalayın.
Cam Kart
Canlı bir arka fon üzerinde süzülen buzlu cam.
-
Hem backdrop-filter hem de -webkit-backdrop-filter çıktısı verir. Not: backdrop-filter eski tarayıcılarda (ör. 103 altı Firefox) desteklenmez; bunlar için düz bir yedek arka plan ekleyin.
Glassmorphism Oluşturucu Hakkında
Glassmorphism Generator, buzlu cam kart efektini oluşturur: arkasında ne olursa olsun bulanıklaştıran yarı saydam bir panel. Kaydırıcılar backdrop-filter bulanıklığını ve doygunluğunu, cam tonu rengini ve saydamlığını, kenarlık rengini ve opaklığını, köşe yarıçapını ve dış gölgeyi kontrol eder: her değişiklik canlı bir arka plan üzerinde anlık olarak render edilir, böylece efekti gerçekçi şekilde değerlendirebilirsiniz.
Dört kalite hazır ayarı (subtle, frosted, vivid ve dark glass) başlamanız için kanıtlanmış kombinasyonlar sunar. Dark hazır ayarı, aynı tarifin koyu arayüzlere nasıl uyum sağladığını gösterir; burada camı arka plandan ayırma işinin çoğunu ince, açık bir kenarlık yapar.
Oluşturulan CSS hem backdrop-filter'ı hem de Safari'nin gerektirdiği -webkit-backdrop-filter ön ekini içerir. Uyumluluk uyarısına dikkat edin: eski tarayıcılar (örneğin 103 sürümünden önceki Firefox) backdrop-filter'ı desteklemez, bu yüzden onlar için sağlam bir yedek arka plan gönderin.
Glassmorphism Oluşturucu Nasıl Kullanılır
- Bir hazır ayardan başlayın (subtle, frosted, vivid veya dark glass) veya varsayılanlardan.
- Backdrop filtresinin bulanıklığını ve doygunluğunu ayarlayın.
- Cam tonu rengini ve saydamlığını ayarlayın.
- Kenarlık rengini, kenarlık opaklığını, köşe yarıçapını ve dış gölgeyi ince ayarlayın.
- CSS'i kopyalayın: Safari için -webkit- ön ekli özelliği zaten içeriyor.