Stiklo morfizmo generatorius

backdrop-filter: blur() yra CSS ypatybė už matinio stiklo išvaizdos – permatomas skydelis, kuris sulieja viską, kas juda už jos, o ne tiesiog išblukina lygią spalvą. Svarbiausia, kad suliejimo kokybės beveik neįmanoma įvertinti pagal statinį pavyzdį; ji atrodo įtikinama tik tada, kai po juo kažkas iš tikrųjų juda, kaip tikrame puslapyje su turiniu, vaizdo įrašu ar animaciniu herojumi. Šis generatorius pateikia peržiūros kortelę tikrai animuotame fone, o ne nejudančiame fone, todėl tai, ką matote vilkdami slankiklius, iš tikrųjų patirs lankytojai.

Fonas yra tikra CSS animacija: didelis linijinis gradientas, nupieštas 400 % elemento dydžio, o @keyframes keičia fono padėtį pirmyn ir atgal cikle – jokios JavaScript animacijos ciklo, jokios drobės, tik ta pati nenutrūkstamo fono padėties technika, naudojama gamybos herojaus skyriuose. Suliejimas, atspalvio spalva ir neskaidrumas, kraštinių paryškinimo spalva / neskaidrumas / plotis, kampo spindulys ir šešėlių švelnumas lemia slankiosios kortelės tiesioginius stilius, o kopijavimo CSS dėžutė atspindi lygiai tas pačias reikšmes.

Ne kiekviena naršyklė palaiko fono filtrą, todėl generatorius taip pat skleidžia tikrą @supports not (fono filtras: blur(1px)) bloką – ne simbolinį gestą, o atsarginę taisyklę su savo fono spalva, apskaičiuota pagal faktinį atspalvio neskaidrumą. Kadangi permatomumas be suliejimo atrodo pastebimai blogesnis (viskas, kas yra už jo, rodoma per nesulietą), atsarginė funkcija automatiškai pakelia alfa kanalą virš pasirinkto atspalvio neskaidrumo, o komentaras sugeneruotame CSS tiksliai paaiškina, kodėl ir kiek.

Viskas apskaičiuojama ir pateikiama jūsų naršyklėje: nėra įkėlimo, jokios paskyros, nėra serverio ir atgal. Nukopijuokite CSS, kai kortelė atrodo tinkama, numeskite ją ant bet kurio elemento, kurį norite įdėti virš nuotraukos, vaizdo įrašo ar gradiento, ir palikite @supports bloką, kad senesnės naršyklės vis tiek gautų skaitomą, nepermatomą kortelę, o ne vos matomą.