Stiklo morfizmo generatorius

backdrop-filter: blur() yra CSS savybė, slypinti už matinio stiklo efekto – permatomas skydelis, suliejantis tai, kas juda už jo, o ne tik prigesinantis plokščią spalvą. Bėda ta, kad suliejimo kokybės beveik neįmanoma įvertinti statiškame fone; jis atrodo įtikinamai tik tada, kai už jo kažkas iš tikrųjų juda, kaip ir tikrame puslapyje su turiniu, vaizdo įrašu ar animuota pagrindine zona. Šis generatorius peržiūros kortelę padeda virš tikrai animuoto fono, o ne statiško, todėl tai, ką matote vilkdami slankiklius, atitinka lankytojų patirtį.

Fonas yra tikra CSS animacija: didelis linear-gradient ištemptas iki 400 % elemento dydžio, o @keyframes cikliškai keičia jo background-position pirmyn ir atgal – jokio JavaScript animacijos ciklo, jokio canvas, tik ta pati ištisinio background-position technika, naudojama produkcinėse pagrindinėse zonose. Suliejimas, atspalvio spalva ir permatomumas, kraštinės paryškinimo spalva, permatomumas ir plotis, kampų apvalumas ir šešėlio švelnumas – visi tiesiogiai veikia plūduriuojančios kortelės stilius, o kopijuojamas CSS atspindi tas pačias reikšmes.

Ne visos naršyklės palaiko backdrop-filter, todėl generatorius išveda tikrą @supports not (backdrop-filter: blur(1px)) bloką – ne simbolinį gestą, o atsarginę taisyklę su savo fono spalva, apskaičiuota pagal jūsų tikrąjį atspalvio permatomumą. Kadangi permatomumas be suliejimo atrodo pastebimai prasčiau (tai, kas yra už jo, matosi nesusilieję), atsarginis stilius automatiškai padidina alfa kanalą virš jūsų pasirinkto atspalvio permatomumo, o komentaras sugeneruotame CSS tiksliai paaiškina kodėl ir kiek.

Viskas apskaičiuojama ir atvaizduojama jūsų naršyklėje: jokių įkėlimų, jokios paskyros, jokių kreipinių į serverį. Nusikopijuokite CSS, kai kortelė atrodo tinkamai, pridėkite prie bet kurio elemento, esančio virš nuotraukos, vaizdo įrašo ar gradiento, ir pasilikite @supports bloką, kad senesnės naršyklės vis tiek gautų įskaitomą, labiau nepermatomą kortelę, o ne vos matomą.