CSS Glassmorphism Oluşturucu

CSS Glassmorphism Oluşturucu nedir?

CSS Glassmorphism Oluşturucu, ön uç geliştiriciler ve ürün tasarımcıları için yapılmış, buzlu cam (glassmorphism) arayüz stiline yönelik ücretsiz bir görsel düzenleyicidir. Bulanıklık miktarını, yüzey saydamlığını, renk doygunluğunu, kenarlık kalınlığını, köşe yarıçapını ve gölge gücünü sayı girişleri ve kaydırıcılarla ayarlayın, ardından örnek renkle bir ton rengi seçin. Canlı bir önizleme bölmesi, cam paneli canlı bir gradyan arka plan üzerinde gerçek zamanlı olarak gösterir ve tam CSS — backdrop-filter, yarı saydam bir arka plan, ince bir kenarlık ve bir box-shadow kullanarak — kopyalamanız için oluşturulur. rgba alfasını elle ayarlamadan veya -webkit-backdrop-filter ön ekini hatırlamadan camsı kartlar, gezinme çubukları, modallar ve kaplamalar oluşturmak için kullanın.

CSS Glassmorphism Oluşturucu nasıl kullanılır

1. Panelin arkasındaki alanın ne kadar buzlanacağını denetlemek için Bulanıklık'ı (px cinsinden) ayarlayın.
2. Camı daha şeffaf yapmak için Saydamlık'ı azaltın veya daha katı bir yüzey için artırın.
3. Arka plan renklerinin camdan parlamasını sağlamak için Doygunluk'u %100'ün üzerine çıkarın.
4. Örnek renkle bir ton rengi seçin ve görünümü tamamlamak için Kenarlık genişliğini, Yarıçap'ı ve Gölge'yi ayarlayın.
5. Her değeri değiştirdikçe önizlemenin arka plan üzerinde gerçek zamanlı olarak güncellenmesini izleyin.
6. Oluşturulan CSS'i stil sayfanıza kopyalayın — -webkit-backdrop-filter yedeğini zaten içerir.

Örnekler

bulanıklık 12, saydamlık %25, doygunluk %120, yarıçap 16, kenarlık 1, gölge 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

bulanıklık 8, saydamlık %60, doygunluk %100, yarıçap 0, kenarlık 1, gölge 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

ton #0f172a, bulanıklık 20, saydamlık %30, doygunluk %140, yarıçap 24, gölge 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Sıkça sorulan sorular

backdrop-filter ne işe yarar?

backdrop-filter, öğenin arkasında ne varsa ona grafik efektleri — burada bulanıklık ve doygunluk — uygular ve buzlu cam görünümünü yaratan da budur. Oluşturucu, çeşitli tarayıcılarda çalışması için hem backdrop-filter'ı hem de -webkit-backdrop-filter ön ekini, ayrıca yarı saydam bir arka plan, kenarlık ve gölgeyi çıkışa verir.

Neden bir saydamlık denetimi var?

Cam efekti, bulanıklaştırılan arka planın görünmesi için kısmen şeffaf bir arka plana ihtiyaç duyar. Saydamlık kaydırıcısı, panelin arka plan renginin (rgba) alfasını ayarlar: düşük değerler daha şeffaf, yüksek değerler daha opak ve katıdır.

Renkli veya koyu cam kullanabilir miyim?

Evet. Örnek renkle herhangi bir ton rengi seçin — araç onu rgba arka planına karıştırır, böylece sıcak, soğuk veya koyu cam oluşturabilirsiniz. Kasvetli kaplamalar için koyu bir tonu daha yüksek saydamlıkla birleştirin veya klasik bir buzlu cam panel için beyaz tutun.

Her tarayıcıda çalışır mı?

Çoğu modern tarayıcı backdrop-filter'ı destekler. Oluşturulan CSS, Safari ve eski Chromium için -webkit-backdrop-filter ön ekini içerir, ancak çok eski tarayıcılar bunu yok sayar ve yalnızca bulanıklık olmadan yarı saydam arka planı gösterir.

Verilerim herhangi bir yere yükleniyor mu?

Hayır. Oluşturucu tamamen tarayıcınızda JavaScript ile çalışır — renkleriniz ve değerleriniz asla bir sunucuya gönderilmez, bu yüzden gizli olarak ve sayfa bir kez yüklendikten sonra çevrimdışı bile çalışır.