backdrop-filter ile buzlu cam paneller kurun, gerçek zeminlerde önizleyin.
backdrop-filter'ın görünmesi için yarı saydam bir dolgu gerekir; webkit öneki eski Safari için hâlâ göndermeye değer.
Buzlu panel
Cam, ancak arkasında bulanıklaştıracak bir şey varsa cam gibi okunur.
background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px;
Açık cam renkli veya koyu zeminlere, koyu cam açık zeminlere oturur. Efektin birden fazla zeminde tuttuğunu görmek için üç zemin arasında geçiş yapın.
Cam gibi okunmasını sağlayan bulanıklıktır, dolgu saydamlığı ise ne kadarının göründüğünü belirler. Saydamlık fazla olursa cam olmaktan çıkar, az olursa üstündeki metin okunmaz olur.
Çıktı, webkit önekli özelliği, efektin bağlı olduğu yarı saydam arka planı ve panele kenar veren ince kenarlığı içerir.
Neredeyse her zaman ögenin arka planı tamamen opak olduğu için. Filtre ögenin arkasındakini bulanıklaştırır; hiçbir şey görünmüyorsa görülecek bir şey de yoktur. Yarı saydam bir rgba dolgu kullanın.
Eski Safari sürümleri için evet ve maliyeti fazladan bir satır. Güncel tarayıcıların hepsi öneksiz özelliği destekler.
Bulanıklık tek başına rengi soldurur. Doygunluğu yüzde 100'ün üstüne çıkarmak canlılığı geri verir; inandırıcı bir buzlu paneli gri bir lekeden ayıran şey budur.
Olabilir ama dikkat ister. Yarı saydam bir panel üzerindeki metin öngörülemez bir arka planın üstünde durur; kontrastı ortalamaya değil, zemininizin en açık ve en koyu kısımlarına göre kontrol edin.
backdrop-filter pahalıdır, çünkü tarayıcı ögenin arkasındakini yeniden çizer. Birkaç panel sorun değil; çok sayıda panel ya da animasyonlu bir panel düşük donanımda gerçek kare süresi harcar.
Soluk açık bir kenarlık, gerçek camın yaptığı gibi kenarı yakalar. Onsuz panel zemine karışıp biçimini kaybetme eğilimindedir.
Evet ve en iyi kullanımlarından biri budur. Kayan içeriğin üstünde bulanık yarı saydam bir başlık, çoğu kişinin işletim sistemi arayüzlerinden tanıdığı kalıptır.
Evet, tamamen ücretsiz ve üyeliksiz.
Katmanlı CSS gölgelerini canlı önizlemeyle kurun, sonra düz CSS veya Tailwind değeri olarak kopyalayın.
Aracı AçTailwind çıktısı sunan CSS gradyan oluşturucu. Doğrusal ve radyal gradyanları görsel olarak tasarlayın, üretime hazır CSS veya Tailwind sınıflarını kopyalayın.
Aracı AçTutamaçları sürükleyerek CSS easing eğrisi şekillendirin ve animasyonu izleyin.
Aracı Aç