Генератор на стъкломорфизъм

backdrop-filter: blur() е CSS свойството зад външния вид на матирано стъкло – полупрозрачен панел, който замъглява всичко, което се движи зад него, вместо просто да избледнява плосък цвят. Уловката е, че качеството на размазването е почти невъзможно да се прецени спрямо статична мостра; чете се като убедително само когато нещо действително се движи под него, както ще бъде на истинска страница със съдържание, видео или анимиран герой. Този генератор поставя картата за предварителен преглед върху истински анимиран фон вместо неподвижен, така че това, което виждате, докато плъзгате плъзгачите, е това, което посетителите всъщност ще изпитат.

Фонът е истинска CSS анимация: голям линеен градиент, рисуван на 400% от размера на елемента, с @keyframes, който измества позицията си на фона напред-назад в цикъл — без цикъл на анимация на JavaScript, без платно, просто същата техника за непрекъснато позициониране на фона, използвана в производствените геройски секции. Замъгляване, цвят на оттенък и непрозрачност, цвят/непрозрачност/широчина на подчертаване на границата, радиус на ъглите и мекота на сянка – всички те управляват живите стилове на плаващата карта, а полето CSS, което може да се копира, отразява точно същите стойности.

Не всеки браузър поддържа backdrop-filter, така че генераторът излъчва и реален @supports not (backdrop-filter: blur(1px)) блок — не знаков жест, а резервно правило със собствен цвят на фона, изчислен от вашата действителна непрозрачност на нюанса. Тъй като полупрозрачността без замъгляване изглежда забележимо по-зле (каквото и да стои зад нея се вижда незамъглено), резервният вариант автоматично повишава алфа канала над избраната от вас непрозрачност на нюанса и коментар в генерирания CSS обяснява точно защо и с колко.

Всичко се изчислява и изобразява във вашия собствен браузър: без качване, без акаунт, без обиколка на сървъра. Копирайте CSS, след като картата изглежда правилно, пуснете я върху всеки елемент, който искате да поставите над снимка, видео или градиент, и запазете блока @supports, така че по-старите браузъри все още да получават четлива, по-непрозрачна карта вместо едва видима.