CSS Glassmorphism Üreteci
Buzlu cam kartı canlı ayarlayın, webkit önekli hazır CSS kodunu kopyalayın.
Cam kart
Bu kart tam olarak aşağıda gördüğünüz CSS ile çizilir; herhangi bir kaydırıcıyı oynatın ve değişimi burada görün.
Örnek eylemCSS Glassmorphism Üreteci hakkında
backdrop-filter öğenin arkasına çizilen şeyi bulanıklaştırır, öğenin kendisini değil; bu yüzden arka planı tamamen opak olan bir kart, bulanıklığı ne kadar artırırsanız artırın cam gibi görünmez, düşük alfalı bir rgba dolgusu şarttır. Bulanıklaştırma renkleri de soldurur; üretimde kullanılan cam CSS kodu neredeyse her zaman blur ile birlikte saturate(150%-180%) içerir. Bu üreteç ikisini de yazar, ayrıca kenarlık, dış gölge, iç parlama ve destek vermeyen tarayıcılar için isteğe bağlı bir yedek blok üretir.
CSS Glassmorphism Üreteci nasıl kullanılır
- 1
Efektin gerçekten görünmesi için üstteki beş renkli arka plandan birini seçin; çizgili arka plan bulanıklık yarıçapını ölçmek için en uygunudur.
- 2
Bulanıklık, katman opaklığı, renk tonu, doygunluk ve parlaklığı kaydırıcılarla ayarlayın; örnek kart anında güncellenir.
- 3
Kenarlık kalınlığı ve rengini, köşe yarıçapını, dış gölgeyi ve iç parlamayı ayarlayın veya beş hazır ayardan biriyle başlayın.
- 4
Eski tarayıcıların düzgün davranması gerekiyorsa yedek seçeneğini işaretleyin; çıktıya daha opak bir arka planla bir özellik sorgusu bloku eklenir.
- 5
Seçici alanına kendi sınıf adınızı yazın ve hazır CSS kodunu kopyalayın.
Sıkça sorulan sorular
Cam efektim neden hiçbir şey yapmıyor?
Üç yaygın neden var: öğenin kendi arka planı tamamen opaktır ve arkadaki hiçbir şey görünmez; arkada yalnızca düz bir renk vardır ve düz rengi bulanıklaştırmak hiçbir fark yaratmaz; ya da üst öğelerden birinde filter vardır, bu yeni bir backdrop kökü oluşturur ve bulanıklığı tamamen iptal eder.
-webkit- öneki hâlâ gerekli mi?
Safari için evet. Chrome ve Edge sürüm 76 ile, Firefox sürüm 103 ile öneksiz özelliği kabul eder, ancak Safari yıllarca yalnızca webkit biçimini destekledi. İki satırı da tutmanın maliyeti yoktur; önce önekli bildirim, sonra standart bildirim gelmelidir.
backdrop-filter performansı düşürür mü?
Evet, en pahalı CSS özelliklerinden biridir çünkü tarayıcı öğenin arkasındaki bölgeyi ayrı işleyip bulanıklaştırmak zorundadır. Tek bir başlık veya birkaç kart sorun değildir, ancak onlarca liste öğesine veya sürekli kaydırılan bir yapıya uygulamak özellikle mobilde kare kaybına yol açar.
Üretilen CSS metnin okunabilirliğini garanti eder mi?
Hayır ve bu, aracın gerçek bir sınırıdır: yalnızca kartın görünümünü üretir, metin kontrastını hiç ölçmez. Gerçek bir sayfada kartın arkasındaki zemin değiştiği için metin, açık bölgelerde WCAG kontrast eşiğinin altına düşebilir; katman opaklığını artırın veya metne gölge ekleyin.