CSS Glassmorphism Generator — Mattgler-áhrif í CSS

Þetta tól býr til CSS mattgler (glassmorphism) áhrif með því að sameina hálfgagnsæjan bakgrunn með backdrop-filter: blur() — dragðu sleðana yfir litríku forskoðunina til að sjá glerkortið móða allt sem er á bak við það, afritaðu svo CSS-ið. Það skilar líka út -webkit-backdrop-filter forskeytinu sem Safari þarf, því backdrop-filter krefst þess enn þar.

Hvað er þetta verkfæri?

Glassmorphism er notendaviðmótsstíll þar sem stak lítur út eins og mattgler: hálfgagnsær bakgrunnur leyfir litum á bak við að skína í gegn, á meðan backdrop-filter: blur() móðar þann bakgrunn svo hann lítur út eins og gler frekar en einfalt gagnsætt spjald. Þunnur, hálfgagnsær jaðar og ávöl horn klára svo yfirleitt útlitið.

Þetta tól gerir þér kleift að búa til þessi áhrif myndrænt. Forskoðunin situr ofan á hreyfanlegum litstigulbakgrunni einmitt til þess að móðan sjáist — glassmorphism virkar aðeins rétt yfir einhverju sem hefur lit eða smáatriði á bak við sig, ekki yfir sléttri hvítri síðu. Stilltu gagnsæi bakgrunnslitarins, styrk móðunnar, gagnsæi jaðarsins og hornaradíusinn, afritaðu svo CSS-ið sem myndast.

Heimild: Filter Effects Module Level 1, W3C — skilgreinir backdrop-filter, eiginleikann sem þessi áhrif byggja á.

Af hverju að nota það?

Bein forskoðun yfir litríkum hreyfanlegum bakgrunni, svo þú sérð mattglersáhrifin í raun í stað þess að giska á móðugildi yfir auðum bakgrunni.
Full stjórn á bakgrunnsgagnsæi, styrk bakgrunnsmóðu, jaðargagnsæi og hornaradíus á einum stað.
Skilar bæði backdrop-filter og -webkit-backdrop-filter forskeytinu sjálfkrafa, svo þú gleymir ekki Safari-stuðningi.
Keyrir algjörlega í vafranum þínum — ekkert sem þú stillir er sent neitt.
Ókeypis, engin skráning, virkar í síma.

Hvernig á að nota það

Veldu bakgrunnslit og stilltu gagnsæi hans — lægra gagnsæi (10–25%) lítur út eins og gler; hærra gagnsæi lítur meira út eins og heilt lituð spjald.
Auktu móðustyrk til að móða það sem er á bak við stakið — það er einmitt þetta sem skapar mattglersútlitið, aðskilið frá gagnsæinu sjálfu.
Stilltu jaðargagnsæi til að bæta við daufum ljósum jaðri, sem hjálpar glerkortinu að lesast sem sérstakt yfirborð í stað þess að renna saman við bakgrunninn.
Stilltu hornaradíus fyrir ávöl horn — glassmorphism-kort eru nánast alltaf ávöl, sjaldan hvasshyrnd.
Afritaðu CSS-ið sem myndast og límdu inn í stílblaðið þitt. Mundu að stakið þarf eitthvað með lit eða áferð á bak við sig — glassmorphism er ósýnilegt yfir sléttum, einlitum bakgrunni.

Dæmi

Inntak

Bakgrunnur: hvítur við 20% gagnsæi · Móða: 10px · Jaðargagnsæi: 30% · Radíus: 16px

Úttak

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;

Klassískur mattglerkortsstíll notaður í innskráningarspjöldum, leiðarstikum og mælaborðshlutum yfir litríkum eða myndabakgrunni.

Safari og vafrastuðningur

backdrop-filter er studdur í núverandi Chrome, Firefox, Edge og Safari, en Safari hefur sögulega þurft -webkit-backdrop-filter forskeytið samhliða óforskeytta eiginleikanum til að birta móðuna — án þess hunsa eldri Safari útgáfur móðuna hljóðlega og sýna aðeins slétta gagnsæja bakgrunninn. Þetta tól skilar því alltaf báðum yfirlýsingunum.

Sjá skjölun MDN um backdrop-filter fyrir núverandi upplýsingar um vafrasamhæfni: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Af hverju glassmorphism þarf eitthvað á bak við sig

backdrop-filter móðar aðeins það sem er sjónrænt á bak við stakið — bakgrunnsmynd, litstigull, annað litað stak, eða efni sem skrunast fyrir neðan. Yfir sléttum hvítum eða einlitum bakgrunni er ekkert til að móða, svo áhrifin eru ósýnileg og stakið lítur bara út eins og örlítið litaður, ávalur kassi. Settu glassmorphism-stök alltaf yfir litstigul, ljósmynd eða annan lifandi bakgrunn svo áhrifin skili sér.

Samsetning með öðrum CSS-áhrifum

Glassmorphism-kort eru oft sett saman við lágstemmda box-shadow undir fyrir aukna dýpt. Búðu til mattglers-CSS-ið hér, bættu svo við mjúkum skugga með Box Shadow Generator og settu báðar yfirlýsingar á sama stakið.

→

Algengar spurningar

Af hverju sjást glersáhrifin ekki á síðunni minni?

backdrop-filter móðar það sem er á bak við stakið. Ef stakið þitt situr yfir sléttum hvítum eða einlitum bakgrunni er ekkert sjónrænt áhugavert til að móða, svo það lítur bara út eins og daufur litaður kassi. Settu það yfir litstigul, mynd eða annan lifandi bakgrunn svo mattglersáhrifin sjáist.

Þarf ég -webkit-backdrop-filter forskeytið?

Já, ef þú vilt að áhrifin birtist áreiðanlega í Safari. Þetta tól skilar alltaf bæði venjulega backdrop-filter og -webkit- forskeytta útgáfuna saman, því Safari hefur sögulega þurft forskeytið til að beita móðunni.

Hver er munurinn á bakgrunnsgagnsæi og móðu?

Bakgrunnsgagnsæi stjórnar því hversu mikið af valda litnum þínum sést á móti því hversu mikið af því sem er á bak við skín óbreytt í gegn. Móða stjórnar því hversu mikið sá sýnilegi bakgrunnur er þveraður/mýktur. Glassmorphism notar bæði saman — bæði gagnsæi og móðu — frekar en aðeins annað.

Get ég notað backdrop-filter á hvaða stak sem er?

Já, en það hefur einungis áhrif á það sem er sjónrænt á bak við það stak í myndgerð síðunnar, ekki afkomendur staksins sjálfs. Það hefur líka afkastakostnað á sumum tækjum þegar það er notað á mörg stök eða hreyft ört, svo best er að nota það á fá áberandi viðmótsyfirborð eins og kort, sprettiglugga eða leiðarstikur frekar en tugi smárra staka.

Af hverju sést jaðarinn minn varla?

Jaðarinn í þessu tóli notar hálfgagnsæjan hvítan lit, sem á að vera lágstemmdur — ljós rönd sem hjálpar glerspjaldinu að lesast sem sérstakt yfirborð án þess að líta út eins og harður, ógagnsær útlínur. Hækkaðu jaðargagnsæissleðann ef þú vilt sýnilegri rönd.