Генератор стакломорфизма
Позовите картицу од матираног стакла — замућење, нијанса, осветљење ивица, радијус угла и сенка — прегледано лебдећи преко стварно анимиране позадине тако да је квалитет замућења видљив у покрету.
Резултат
бацкдроп-филтер: блур() је ЦСС својство иза изгледа матираног стакла — провидни панел који замагљује све што се креће иза њега уместо да само бледи равну боју. Квака је у томе што је скоро немогуће проценити квалитет замућења у односу на статички узорак; чита се као убедљиво само када се нешто заиста креће испод њега, као што ће бити на стварној страници са садржајем, видео снимком или анимираним херојем. Овај генератор ставља картицу за преглед преко истински анимиране позадине уместо мирне, тако да ће посетиоци заиста искусити оно што видите док превлачите клизаче.
Позадина је права ЦСС анимација: велики линеарни градијент насликан на 400% величине елемента, са @кеифрамес који помера своју позицију позадине напред-назад у петљи — нема петље ЈаваСцрипт анимације, нема платна, само иста техника континуиране позиције позадине која се користи у одељцима хероја продукције. Замућење, боја нијанси и непрозирност, боја/прозирност/ширина светлих ивица ивица, радијус угла и мекоћа сенке, све то покреће живе стилове плутајуће картице, а ЦСС оквир за копирање одражава потпуно исте вредности.
Не подржава сваки претраживач бацкдроп-филтер, тако да генератор такође емитује прави блок @суппортс нот (бацкдроп-филтер: блур(1пк)) — не токен гест, већ резервно правило са сопственом бојом позадине израчунатом на основу ваше стварне непрозирности нијансе. Пошто прозирност без замућења изгледа приметно лошије (шта год да је иза ње показује се незамућено), резервни канал аутоматски подиже алфа канал изнад изабране непрозирности нијансе, а коментар у генерисаном ЦСС-у објашњава тачно зашто и за колико.
Све се израчунава и рендерује у вашем претраживачу: без отпремања, без налога, без повратног пута сервера. Копирајте ЦСС када картица буде изгледала исправно, ставите је на било који елемент који желите да поставите изнад фотографије, видеа или градијента и задржите блок @суппортс тако да старији претраживачи и даље добијају читљиву, непрозирнију картицу уместо једва видљиве.