Glassmorphism ģenerators
Noregulējiet matēta stikla karti – izplūdumu, tonējumu, apmales izcēlumu, stūru rādiusu un ēnu –, priekšskatot to peldam pāri patiesi animētam fonam, lai izplūduma kvalitāte būtu redzama kustībā.
🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.
Rezultāts
backdrop-filter: blur() ir CSS īpašība, kas rada matēta stikla izskatu – caurspīdīgu paneli, kurš izpludina visu, kas aiz tā kustas, nevis vienkārši izbalina plakanu krāsu. Āķis ir tajā, ka izplūduma kvalitāti ir gandrīz neiespējami novērtēt pret statisku paraugu; tas šķiet pārliecinošs tikai tad, kad aiz tā kaut kas patiešām kustas – tāpat kā īstā lapā ar saturu, video vai animētu hero. Šis ģenerators novieto priekšskatījuma karti pār patiesi animētu fonu, nevis nekustīgu, tāpēc tas, ko redzat, velkot slīdņus, ir tas, ko apmeklētāji piedzīvos.
Fons ir īsta CSS animācija: liels linear-gradient, kas uzzīmēts 400% elementa izmērā, ar @keyframes, kas nepārtrauktā cilpā pārbīda tā background-position uz priekšu un atpakaļ – ne JavaScript animācijas cilpa, ne canvas, tikai tā pati nepārtrauktā background-position tehnika, ko izmanto ražošanas hero sekcijās. Izplūdums, tonējuma krāsa un caurredzamība, apmales izcēluma krāsa/caurredzamība/platums, stūru rādiuss un ēnas maigums – tas viss vada peldošās kartes tiešraides stilus, un kopējamais CSS lodziņš atspoguļo tieši tās pašas vērtības.
Ne visas pārlūkprogrammas atbalsta backdrop-filter, tāpēc ģenerators izdod arī īstu @supports not (backdrop-filter: blur(1px)) bloku – nevis simbolisku žestu, bet gan atkāpšanās kārtulu ar savu fona krāsu, kas aprēķināta no jūsu faktiskās tonējuma caurredzamības. Tā kā caurspīdīgums bez izplūduma izskatās ievērojami sliktāk (viss aiz tā redzams neizplūdināts), atkāpšanās risinājums automātiski paaugstina alfa kanālu virs jūsu izvēlētās tonējuma caurredzamības, un ģenerētajā CSS komentārs paskaidro, kāpēc un par cik tieši.
Viss tiek aprēķināts un atveidots jūsu pašu pārlūkprogrammā: nav augšupielādes, nav konta, nav servera pieprasījumu. Nokopējiet CSS, tiklīdz karte izskatās pareizi, pievienojiet to jebkuram elementam, ko vēlaties novietot virs fotoattēla, video vai gradienta, un saglabājiet @supports bloku, lai vecākas pārlūkprogrammas joprojām saņemtu salasāmu, necaurredzamāku karti, nevis tikko saredzamu.