Generator CSS Glassmorphism

To orodje ustvari CSS učinek zmrznjenega stekla (glassmorphism) s kombinacijo polprosojnega ozadja in backdrop-filter: blur() — povleci drsnike nad pisano predogledno sliko, da vidiš, kako steklena kartica zamegli vse, kar je za njo, nato kopiraj CSS. Poleg tega generira tudi predpono -webkit-backdrop-filter, ki jo Safari še vedno potrebuje.

Kaj je to orodje?

Glassmorphism je slog uporabniškega vmesnika, kjer element izgleda kot zmrznjeno steklo: polprosojno ozadje omogoča, da skoznj presevajo barve za njim, medtem ko backdrop-filter: blur() to ozadje zamegli, tako da deluje kot steklo in ne kot navadna prosojna ploskev. Tanek, polprosojen rob in zaobljeni koti sliko običajno dopolnijo.

To orodje ti omogoča, da ta učinek zgradiš vizualno. Predogled leži nad premikajočim se gradientnim ozadjem prav zato, da je zameglitev vidna — glassmorphism deluje pravilno le nad nečim z barvo ali podrobnostmi v ozadju, ne nad povsem belo stranjo. Prilagodi prosojnost barve ozadja, jakost zameglitve, prosojnost roba in radij kotov, nato kopiraj ustvarjeni CSS.

Vir: Filter Effects Module Level 1, W3C — opredeljuje backdrop-filter, lastnost, na kateri temelji ta učinek.

Zakaj ga uporabiti?

Predogled v živo nad pisanim animiranim ozadjem, tako da učinek zmrznjenega stekla dejansko vidiš, namesto da vrednosti zameglitve ugibaš nad praznim ozadjem.
Popoln nadzor nad prosojnostjo ozadja, jakostjo zameglitve, prosojnostjo roba in border-radius na enem mestu.
Samodejno generira tako backdrop-filter kot predpono -webkit-backdrop-filter, da ne pozabiš na podporo za Safari.
Deluje v celoti v tvojem brskalniku — nič od tega, kar nastaviš, se nikamor ne nalaga.
Brezplačno, brez prijave, deluje na mobilnih napravah.

Kako ga uporabljati

Izberi barvo ozadja in prilagodi njeno prosojnost — nižja prosojnost (10–25 %) deluje kot steklo, višja pa bolj kot poln obarvan panel.
Povečaj jakost zameglitve, da zamegliš vse, kar je za elementom — to je tisto, kar dejansko ustvari videz zmrznjenega stekla, ločeno od same prosojnosti.
Prilagodi prosojnost roba, da dodaš rahel svetel rob, ki pomaga, da steklena kartica deluje kot samostojna ploskev in se ne zlije z ozadjem.
Nastavi border-radius za zaobljene kote — kartice v slogu glassmorphism so skoraj vedno zaobljene, redko ostrih kotov.
Kopiraj generirani CSS in ga prilepi v svojo stylesheet datoteko. Ne pozabi, da mora imeti element za sabo nekaj z barvo ali teksturo — glassmorphism je nad ravnim, enobarvnim ozadjem neviden.

Primer

Vnos

Background: white at 20% opacity · Blur: 10px · Border opacity: 30% · Radius: 16px

Rezultat

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Klasičen slog kartice iz zmrznjenega stekla, ki se uporablja pri prijavnih ploščah, navigacijskih vrsticah in gradnikih nadzornih plošč nad pisanim ozadjem ali fotografijo.

Safari in podpora brskalnikov

backdrop-filter podpirajo trenutne različice Chroma, Firefoxa, Edga in Safarija, vendar je Safari za prikaz zameglitve zgodovinsko potreboval predpono -webkit-backdrop-filter poleg standardne lastnosti — brez nje starejše različice Safarija zameglitev tiho ignorirajo in prikažejo le ravno prosojno ozadje. Zato to orodje vedno generira obe deklaraciji.

Za trenutne podrobnosti o združljivosti brskalnikov glej MDN-jevo dokumentacijo backdrop-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Zakaj glassmorphism potrebuje nekaj za sabo

backdrop-filter zamegli le tisto, kar je vizualno za elementom — sliko v ozadju, gradient, drug obarvan element ali vsebino, ki se pomika pod njim. Nad povsem belim ali enobarvnim ozadjem ni ničesar za zameglitev, zato je učinek neviden in element izgleda le kot rahlo obarvan, zaobljen okvir. Elemente v slogu glassmorphism vedno postavi nad gradient, fotografijo ali kako drugače pisano ozadje, da učinek deluje.

Kombiniranje z drugimi CSS učinki

Kartice v slogu glassmorphism pogosto kombinirajo rahlo box-shadow spodaj za dodatno globino. Tukaj ustvari CSS za zmrznjeno steklo, nato dodaj mehko senco z generatorjem senc (Box Shadow Generator) in obe deklaraciji uporabi na istem elementu.

→ Generator box-shadow · Generator border-radius

Pogosta vprašanja

Zakaj se steklen učinek na moji strani ne prikaže?

backdrop-filter zamegli vse, kar je za elementom. Če je tvoj element nad povsem belim ali enobarvnim ozadjem, ni ničesar zanimivega za zameglitev, zato izgleda le kot rahlo obarvan okvir. Postavi ga nad gradient, sliko ali kako drugače podrobno ozadje, da bo učinek zmrznjenega stekla viden.

Ali potrebujem predpono -webkit-backdrop-filter?

Da, če želiš, da se učinek zanesljivo prikaže v Safariju. To orodje vedno hkrati generira standardni backdrop-filter in različico s predpono -webkit-, saj je Safari zgodovinsko potreboval predpono za prikaz zameglitve.

Kakšna je razlika med prosojnostjo ozadja in zameglitvijo?

Prosojnost ozadja določa, koliko izbrane barve se prikaže v primerjavi s tem, koliko ozadja za njim presva nespremenjeno. Zameglitev določa, koliko je to vidno ozadje zabrisano/omehčano. Glassmorphism uporablja oboje skupaj — nekaj prosojnosti in nekaj zameglitve — namesto zgolj enega.

Ali lahko backdrop-filter uporabim na kateremkoli elementu?

Da, vendar vpliva le na to, kar je vizualno za tem elementom znotraj upodabljanja strani, ne pa na elementove lastne otroke. Na nekaterih napravah ima tudi zmogljivostni strošek, če ga uporabiš na veliko elementih ali pogosto animiraš, zato je najbolje uporaben za manjše število vidnih vmesniških ploskev, kot so kartice, modalna okna ali navigacijske vrstice, ne pa za deset ali več majhnih elementov.

Zakaj je moj rob komaj viden?

Rob v tem orodju uporablja polprosojno belo barvo, ki je namenoma diskretna — svetel rob, ki pomaga, da steklena ploskev deluje kot samostojna površina, ne da bi izgledala kot trd, neprosojen obris. Če želiš bolj viden rob, povečaj drsnik prosojnosti roba.