Stikla morfisma ģenerators

backdrop-filter: blur() ir CSS īpašība aiz matēta stikla izskata — caurspīdīgs panelis, kas aizmiglo visu, kas kustas aiz tā, nevis vienkārši izbalina plakanu krāsu. Galvenais ir tas, ka izplūšanas kvalitāti gandrīz nav iespējams novērtēt, salīdzinot ar statisku paraugu; tas tiek uzskatīts par pārliecinošu tikai tad, kad kaut kas patiešām pārvietojas zem tā, kā tas notiek reālā lapā ar saturu, video vai animētu varoni. Šis ģenerators priekšskatījuma kartīti novieto uz patiesi animēta fona, nevis uz nekustīgu fona, tāpēc tas, ko redzat, velkot slīdņus, ir tas, ko apmeklētāji reāli piedzīvos.

Fons ir īsta CSS animācija: liels lineārs gradients, kas krāsots 400% no elementa lieluma, @keyframes mainot fona pozīciju uz priekšu un atpakaļ pa cilpu — bez JavaScript animācijas cilpas, bez audekla, tikai tā pati nepārtrauktā fona pozīcijas tehnika, kas tiek izmantota ražošanas varoņu sadaļās. Izplūšana, toņu krāsa un necaurredzamība, apmales izgaismošanas krāsa/necaurredzamība/platums, stūra rādiuss un ēnu maigums nosaka peldošās kartes reāllaika stilus, un kopējamā CSS kaste atspoguļo tieši tās pašas vērtības.

Ne katrs pārlūks atbalsta fona kolāžas filtru, tāpēc ģenerators izstaro arī īstu @supports not (backdrop-filter: blur(1px)) bloku — nevis marķiera žestu, bet gan atkāpšanās kārtulu ar savu fona krāsu, kas aprēķināta no jūsu faktiskās nokrāsas necaurredzamības. Tā kā caurspīdīgums bez izplūšanas izskatās ievērojami sliktāks (neizmiglotā veidā tiek rādīts viss, kas atrodas aiz tā), atkāpšanās funkcija automātiski paaugstina alfa kanālu virs jūsu izvēlētās nokrāsas necaurredzamības, un komentārs ģenerētajā CSS — precīzi izskaidro, kāpēc un cik daudz.

Viss tiek aprēķināts un renderēts jūsu pārlūkprogrammā: bez augšupielādes, bez konta, bez servera turp un atpakaļ. Kopējiet CSS, tiklīdz kartīte izskatās pareizi, nometiet to uz jebkura elementa, kuru vēlaties novietot virs fotoattēla, videoklipa vai gradienta, un saglabājiet @supports bloku, lai vecākas pārlūkprogrammas joprojām iegūtu lasāmu, necaurredzamāku karti, nevis tikko pamanāmu karti.