⭐ 0
🔍
Tekst Slika PDF i dokumenti Audio Glazba Elektronika Vrijeme Komunalije Validatori Ezoterija Igre

Glassmorphism Generator

Uključite karticu od matiranog stakla — zamućenje, nijansu, isticanje obruba, radijus kuta i sjenku — pregled koji lebdi iznad istinski animirane pozadine tako da je kvaliteta zamućenja vidljiva u pokretu.

12px
20px
20
40
1px
30px

Kartica od mutnog stakla

Ova kartica lebdi iznad pozadine koja se neprestano kreće tako da možete procijeniti zamućenje u pokretu, a ne prema ravnom uzorku.

Obrada... 0%

Rezultat

backdrop-filter: blur() je svojstvo CSS-a iza izgleda mat stakla — prozirne ploče koja zamagljuje sve što se iza nje kreće umjesto da samo blijedi ravnu boju. Kvaka je u tome što je kvalitetu zamućenja gotovo nemoguće ocijeniti u odnosu na statički uzorak; čini se uvjerljivim samo kad se ispod njega nešto doista miče, kao što će biti na stvarnoj stranici sa sadržajem, videom ili animiranim junakom. Ovaj generator stavlja karticu pregleda preko istinski animirane pozadine umjesto nepokretne, tako da ono što vidite dok povlačite klizače je ono što će posjetitelji zapravo iskusiti.

Pozadina je prava CSS animacija: veliki linearni gradijent naslikan na 400% veličine elementa, s @keyframesom koji pomiče svoj položaj pozadine naprijed-natrag u petlji — nema JavaScript petlje animacije, nema platna, samo ista tehnika kontinuiranog položaja pozadine koja se koristi u odjeljcima heroja proizvodnje. Zamućenje, boja nijansi i neprozirnost, boja isticanja obruba/prozirnost/širina, radijus kuta i mekoća sjene – sve to pokreću žive stilove lebdeće kartice, a CSS okvir koji se može kopirati odražava potpuno iste vrijednosti.

Ne podržava svaki preglednik filtar pozadine, tako da generator također emitira pravi blok @supports not (filtar pozadine: zamućenje(1px)) — ne token gesta, već zamjensko pravilo s vlastitom bojom pozadine izračunatom iz vaše stvarne neprozirnosti nijanse. Budući da prozirnost bez zamućenja izgleda osjetno lošije (što god se nalazi iza toga, vidi se nezamućeno), zamjena automatski podiže alfa kanal iznad neprozirnosti odabrane nijanse, a komentar u generiranom CSS-u točno objašnjava zašto i za koliko.

Sve se izračunava i prikazuje u vašem vlastitom pregledniku: bez prijenosa, bez računa, bez povratnog putovanja poslužitelja. Kopirajte CSS kada kartica izgleda dobro, ispustite je na bilo koji element koji želite postaviti iznad fotografije, videa ili gradijenta i zadržite blok @supports tako da stariji preglednici i dalje dobivaju čitljivu, neprozirniju karticu umjesto one jedva vidljive.

🛡️
Izvršeno u pregledniku

Vaše datoteke i unosi nikada ne napuštaju ovaj uređaj. Obrada se odvija potpuno offline. 100% siguran.

Prihvaćeni formati i pravila

  • Kontrole zamućenja, nijanse boje/neprozirnosti, isticanja obruba u boji/neprozirnosti/širine, radijusa kuta i mekoće sjene, sve uživo.
  • Animirana gradijentna pozadina CSS-a iza kartice putem stvarne @keyframes petlje položaja pozadine, tako da je matirano zamućenje vidljivo u odnosu na pravo kretanje.
  • CSS koji se može kopirati, uključujući pravi @supports not (filtar pozadine) zamjenski blok s automatski većom neprozirnošću, komentirano i objašnjeno.

Ključne prednosti

✓ Kartica za pregled lebdi preko gradijentne pozadine koja se neprestano kreće, tako da zamućenje procjenjujete na način na koji posjetitelji zapravo hoće - u pokretu, a ne naspram ravnog uzorka.
✓ Izlaz isporučuje izvornu @supports not (filtar pozadine) zamjenu s neprozirnošću izračunatom na temelju vaše vlastite postavke nijanse, a ne fiksnog pogađanja.
✓ Svaka kontrola — zamućenje, nijansa, isticanje obruba, radijus, mekoća sjene — ažurira živu karticu i CSS koji se može kopirati pri svakom povlačenju.

Slučajevi upotrebe

  • • Dizajnirajte matiranu navigacijsku traku ili modalni sloj i procijenite kvalitetu zamućenja na pokretnoj pozadini umjesto ravnog uzorka boje.
  • • Uključite suptilno isticanje obruba i mekoću sjene za karticu s cijenama, zatim kopirajte CSS koji već uključuje elegantnu zamjenu za starije preglednike.
  • • Provjerite koliko neprozirnost boje treba povećati u @supports backbacku prije slanja odjeljka heroja od mat stakla.