Cammorfizm Jeneratörü
Bulanıklaştırma, renk tonu, kenar vurgusu, köşe yarıçapı ve gölge gibi buzlu camlı bir kartın ön izlemesi gerçek anlamda animasyonlu bir arka plan üzerinde yapılır, böylece bulanıklık kalitesi hareket halinde görünür.
Sonuç
zemin filtresi: bulanıklık(), buzlu cam görünümünün arkasındaki CSS özelliğidir; düz bir rengi soldurmak yerine arkasında hareket eden her şeyi bulanıklaştıran yarı saydam bir panel. İşin püf noktası, bulanıklık kalitesinin statik bir renk örneğine göre değerlendirilmesinin neredeyse imkansız olmasıdır; İçerik, video veya animasyonlu bir kahramanın olduğu gerçek bir sayfada olduğu gibi, yalnızca altında bir şey gerçekten hareket ettiğinde ikna edici olarak okunur. Bu oluşturucu, önizleme kartını hareketsiz bir arka plan yerine gerçekten hareketli bir arka plan üzerine yerleştirir; böylece kaydırıcıları sürüklerken gördüğünüz şey, ziyaretçilerin gerçekte deneyimleyeceği şey olur.
Arka plan gerçek bir CSS animasyonudur: öğenin boyutunun %400'ü oranında boyanmış büyük bir doğrusal degrade; @ana kareler arka plan konumunu bir döngü üzerinde ileri geri kaydırır; JavaScript animasyon döngüsü yok, tuval yok, yalnızca yapım kahramanı bölümlerinde kullanılan sürekli arka plan konumu tekniğinin aynısı. Bulanıklaştırma, renk tonu ve opaklık, kenarlığın vurgu rengi/opaklığı/genişliği, köşe yarıçapı ve gölge yumuşaklığı, kayan kartın canlı stillerini yönlendirir ve kopyalanabilir CSS kutusu tam olarak aynı değerleri yansıtır.
Her tarayıcı arka plan filtresini desteklemez, bu nedenle oluşturucu aynı zamanda gerçek bir @supports not (backdrop-filter: bulanıklık(1px)) bloğu da yayar; bir simge hareketi değil, gerçek renk tonu opaklığınızdan hesaplanan kendi arka plan rengine sahip bir geri dönüş kuralı. Bulanık olmayan yarı saydamlık fark edilir derecede daha kötü göründüğünden (arkasında ne varsa bulanıklaşmadan gösterilir), geri dönüş alfa kanalını otomatik olarak seçtiğiniz renk tonu opaklığının üzerine çıkarır ve oluşturulan CSS'deki bir yorum tam olarak bunun nedenini ve ne kadarını açıklar.
Her şey kendi tarayıcınızda hesaplanır ve oluşturulur: yükleme yok, hesap yok, sunucu gidiş-dönüş yok. Kart doğru göründüğünde CSS'yi kopyalayın, bir fotoğrafın, videonun veya degradenin üzerine yerleştirmek istediğiniz herhangi bir öğenin üzerine bırakın ve @supports bloğunu saklayın, böylece eski tarayıcılar zar zor görülebilen bir kart yerine okunabilir, daha opak bir kart almaya devam eder.
Dosyalarınız ve girdileriniz bu cihazdan asla ayrılmaz. İşlem tamamen çevrimdışı çalışır. %100 Güvenli.
Kabul Edilen Formatlar ve Kurallar
- Bulanıklaştırma, renk tonu rengi/opaklığı, kenar vurgu rengi/opaklığı/genişliği, köşe yarıçapı ve gölge yumuşaklığı kontrollerinin tümü canlı.
- Gerçek bir @keyframes arka plan konumu döngüsü aracılığıyla kartın arkasında animasyonlu bir CSS degrade arka planı, böylece gerçek hareket karşısında buzlu bulanıklığın görülmesi sağlanır.
- Otomatik olarak daha yüksek opaklığa sahip gerçek bir @supports not (backdrop-filter) geri dönüş bloğu içeren kopyalanabilir CSS, yorumlanmış ve açıklanmıştır.
Temel Faydalar
Kullanım Durumları
- • Buzlu bir gezinme çubuğu veya modal kaplama tasarlayın ve bulanıklık kalitesini düz renk örneği yerine hareketli bir arka plana göre değerlendirin.
- • Fiyatlandırma kartı için ince bir kenar vurgusu ve gölge yumuşaklığı girin, ardından eski tarayıcılar için zaten zarif bir geri dönüş içeren CSS'yi kopyalayın.
- • Buzlu cam kahraman bölümünü göndermeden önce @supports geri dönüşünde renk tonunun opaklığının ne kadar artması gerektiğini kontrol edin.
Bu aracı oylayın
