CSS glassmorphism generatorius

Šis įrankis sukuria CSS matinio stiklo (glassmorphism) efektą, sujungdamas pusiau permatomą foną su backdrop-filter: blur() — vilkite slankiklius virš spalvingos peržiūros, kad pamatytumėte, kaip stiklo kortelė sulieja viską, kas už jos, tada kopijuokite CSS. Jis taip pat sugeneruoja -webkit-backdrop-filter priešdėlį, kurio reikia Safari, nes ten backdrop-filter jo vis dar reikalauja.

Kas yra šis įrankis?

Glassmorphism yra sąsajos stilius, kai elementas atrodo kaip matinis stiklas: pusiau permatomas fonas leidžia matyti spalvas už jo, o backdrop-filter: blur() sulieja tą foną, kad jis skaitytųsi kaip stiklas, o ne paprastas permatomas skydelis. Plonas, pusiau permatomas rėmelis ir suapvalinti kampai paprastai užbaigia išvaizdą.

Šis įrankis leidžia sukurti tą efektą vizualiai. Peržiūra yra virš judančio gradiento fono būtent tam, kad suliejimas būtų matomas — glassmorphism teisingai skaitosi tik virš kažko su spalva ar detalėmis už jo, o ne vientiso balto puslapio. Koreguokite fono spalvos skaidrumą, suliejimo stiprumą, rėmelio skaidrumą ir kampo spindulį, tada kopijuokite sugeneruotą CSS.

Šaltinis: Filter Effects Module Level 1, W3C — apibrėžia backdrop-filter, savybę, kuria paremtas šis efektas.

Kodėl jį naudoti?

Gyva peržiūra virš spalvingo animuoto fono, kad iš tikrųjų matytumėte matinio stiklo efektą, o ne spėliotumėte suliejimo reikšmes prie tuščio fono.
Pilna kontrolė vienoje vietoje — fono skaidrumas, fono suliejimo stiprumas, rėmelio skaidrumas ir border-radius.
Automatiškai sugeneruoja tiek backdrop-filter, tiek -webkit-backdrop-filter priešdėlį, kad nepamirštumėte Safari palaikymo.
Viskas vyksta jūsų naršyklėje — niekas iš to, ką konfigūruojate, niekur nesiunčiama.
Nemokama, be registracijos, veikia mobiliuosiuose.

Kaip naudoti

Pasirinkite fono spalvą ir koreguokite jos skaidrumą — mažesnis skaidrumas (10–25%) skaitosi kaip stiklas; didesnis atrodo labiau kaip vientisas tonuotas skydelis.
Padidinkite suliejimo stiprumą, kad sulietumėte tai, kas yra už elemento — tai iš tikrųjų sukuria matinio stiklo išvaizdą, atskirai nuo paties skaidrumo.
Koreguokite rėmelio skaidrumą, kad pridėtumėte subtilų šviesų kraštą — tai padeda stiklo kortelei skaitytis kaip atskirai paviršiui, o ne susilieti su fonu.
Nustatykite border-radius suapvalintiems kampams — glassmorphism kortelės beveik visada suapvalintos, retai su aštriais kampais.
Nukopijuokite sugeneruotą CSS ir įklijuokite į savo stilių lapą. Atminkite, kad elementui reikia turėti kažką su spalva ar tekstūra už jo — glassmorphism nematomas virš vientiso, vienspalvio fono.

Pavyzdys

Įvestis

Fonas: baltas, 20% skaidrumas · Suliejimas: 10px · Rėmelio skaidrumas: 30% · Spindulys: 16px

Išvestis

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;

Klasikinis matinio stiklo kortelės stilius, naudojamas prisijungimo skydeliuose, navigacijos juostose ir valdymo pulto valdikliuose virš spalvingo ar nuotraukos fono.

Safari ir naršyklių palaikymas

backdrop-filter palaikoma dabartinėse Chrome, Firefox, Edge ir Safari naršyklėse, bet Safari istoriškai reikalavo -webkit-backdrop-filter priešdėlio kartu su nepriešdėline savybe, kad atvaizduotų suliejimą — be jo senesnės Safari versijos tyliai ignoruoja suliejimą ir rodo tik vientisą permatomą foną. Būtent dėl to šis įrankis visada sugeneruoja abi deklaracijas.

Naujausius naršyklių suderinamumo duomenis rasite MDN backdrop-filter dokumentacijoje: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Kodėl glassmorphism reikia kažko už jo

backdrop-filter sulieja tik tai, kas vizualiai yra už elemento — fono paveikslėlį, gradientą, kitą spalvotą elementą ar po juo slenkantį turinį. Virš vientiso balto ar vienspalvio fono nėra ko lieti, tad efektas nematomas, o elementas tiesiog atrodo kaip šiek tiek tonuota, suapvalinta dėžutė. Visada dėkite glassmorphism elementus virš gradiento, nuotraukos ar kitaip detalizuoto fono, kad efektas skaitytųsi.

Derinimas su kitais CSS efektais

Glassmorphism kortelės dažnai derinamos su subtiliu box-shadow apačioje papildomam gyliui. Sugeneruokite matinio stiklo CSS čia, tada pridėkite švelnų šešėlį su Box Shadow generatoriumi ir taikykite abi deklaracijas tam pačiam elementui.

→ box-shadow generatorius · border-radius generatorius

Dažniausiai užduodami klausimai

Kodėl stiklo efektas nerodomas mano puslapyje?

backdrop-filter sulieja tai, kas yra už elemento. Jei jūsų elementas yra virš vientiso balto ar vienspalvio fono, nėra ko įdomaus lieti, tad jis tiesiog atrodo kaip blanki tonuota dėžutė. Padėkite jį virš gradiento, nuotraukos ar kito detalaus fono, kad matinio stiklo efektas būtų matomas.

Ar man reikia -webkit-backdrop-filter priešdėlio?

Taip, jei norite, kad efektas patikimai atsivaizduotų Safari naršyklėje. Šis įrankis visada sugeneruoja tiek standartinį backdrop-filter, tiek -webkit- priešdėlio versiją kartu, nes Safari istoriškai reikėjo priešdėlio, kad taikytų suliejimą.

Koks skirtumas tarp fono skaidrumo ir suliejimo?

Fono skaidrumas valdo, kiek matoma jūsų pasirinkta tono spalva, palyginti su tuo, kiek nepakeista matoma tai, kas yra už jos. Suliejimas valdo, kiek tas matomas fonas yra sutepamas/suminkštinamas. Glassmorphism naudoja abu kartu — dalį skaidrumo plius dalį suliejimo — o ne kurį nors vieną atskirai.

Ar galiu naudoti backdrop-filter bet kuriam elementui?

Taip, bet tai veikia tik tai, kas vizualiai yra už to elemento puslapio atvaizdavime, o ne paties elemento vaikus. Tai taip pat turi našumo kainą kai kuriuose įrenginiuose, kai taikoma daugeliui elementų ar dažnai animuojama, tad geriausia naudoti nedaugeliui ryškių sąsajos paviršių, tokių kaip kortelės, modaliniai langai ar navigacijos juostos, o ne dešimtims mažų elementų.

Kodėl mano rėmelis vos matomas?

Šio įrankio rėmelis naudoja pusiau permatomą baltą spalvą, kuri turi būti subtili — šviesus kraštas, padedantis stiklo skydeliui skaitytis kaip atskiras paviršius, neatrodant kaip griežtas, vientisas kontūras. Padidinkite rėmelio skaidrumo slankiklį, jei norite matomesnio krašto.