Tengeneza madoido ya kisasa ya kioo kilichofifia (frosted glass) kwenye UI. Rekebisha ukungu, uwazi, na mipaka, kisha nakili CSS moja kwa moja kwenye mradi wako. 100% bure. Hakuna kujisajili kunakohitajika.
Athari maarufu ya kioo cha barafu kwa muundo wa kisasa wa wavuti.
Imejengwa kuanzia mwanzo kwa ajili ya faragha kamili, utekelezaji wa papo hapo, na bila vizuizi. Hakuna usajili au malipo yanayohitajika.
Rekebisha utovu wa uwazi (blur), wepesi, na uenezaji wa rangi mubashara juu ya mandhari ya nyuma ili kuona muonekano wa kioo chako papo hapo.
Inazalisha kiotomatiki msimbo wa backdrop-filter wenye kiambishi awali cha webkit ili kuhakikisha uoanifu kwenye Safari, Chrome, na Firefox.
Zalisha madarasa ya kawaida ya CSS au utafsiri muundo wako kuwa madarasa ya huduma ya Tailwind CSS papo hapo.
Utekelezaji wa 100% upande wa mtumiaji unawezesha kuburuta vitelezi na kuona mabadiliko ya CSS bila kuchelewa.
Linganisha injini yetu ya WebAssembly kwenye kivinjari chako dhidi ya zana za zamani za wingu.
| Kipengele | Utiliome (Ndani ya Kivinjari) | Vibadilisha vya Zamani vya Wingu |
|---|---|---|
| Onyesho la Mubashara | Eneo mwingiliano la muda halisi | Jenereta za msimbo tuli |
| Matokeo ya Msimbo | Vanilla CSS na Madarasa ya Tailwind | CSS pekee |
| Uoanifu | Inaongeza -webkit-backdrop-filter kiotomatiki | Inahitaji kuongeza kiambishi kwa mikono |
| Gharama | Bure Milele Bila Matangazo | Malipo yanahitajika kwa mpangilio bora |
Hakuna usakinishaji wa programu unaohitajika. Kila kitu kinafanyika moja kwa moja ndani ya kivinjari chako.
Tumia kitelezi cha blur kuamua jinsi vipengele vya nyuma vinavyopaswa kufifishwa nyuma ya kadi yako ya kioo.
Badilisha njia ya alpha ya rangi ya nyuma ili kutoa kioo chako mwonekano wa giza au mwonekano mweupe unaochanganika.
Bofya kitufe cha kuhamisha ili kunakili kipande cha msimbo wa CSS tayari kwa matumizi moja kwa moja kwenye ubao wako wa kunakili.
Jibu la Haraka: Glassmorphism ni mtindo wa kisasa wa muundo wa kiolesura unaotambuliwa kwa mandhari ya nyuma yenye uwazi kidogo pamoja na utovu mkubwa wa uwazi (kioo kilichofifishwa), kivuli laini cha safu nyingi, na mipaka mwembamba. Inatengeneza hisia ya kina cha wima na uongozi.
Ukiwa umeanzia sana kwenye macOS Big Sur, iOS, na Windows 11 Fluent Design, Glassmorphism imekuwa kiwango kikuu cha programu za kisasa na za hali ya juu za wavuti.
Falsafa kuu inategemea "Z-axis". Kwa kufanya safu ya juu kuwa na uwazi kidogo na kufifisha sana safu zenye rangi zilizo chini yake, wabunifu wanaunda muundo wa mwonekano bila kutegemea kivuli kizito. Inampa mtumiaji muktadha wa kinachoendelea "nyuma" ya dirisha linalotumika sasa.
Jibu la Haraka: Sifa ya CSS ya backdrop-filter inatumia madoido ya picha kama vile kufifisha au kubadilisha rangi kwenye eneo lililo nyuma kabisa ya kipengele. Tofauti na 'filter' ya kawaida inayofifisha kipengele chenyewe, backdrop-filter inaathiri tu kile kinachoonekana kupitia uwazi wa nyuma wa kipengele.
Ili kufikia athari ya Glassmorphism, waendelezaji wanategemea kikamilifu sheria ya CSS ya backdrop-filter. Unapoweka kipengele kuwa na rangi ya nyuma yenye uwazi (k.m., background: rgba(255, 255, 255, 0.2);) na kutumia backdrop-filter: blur(10px);, injini ya vivinjari inachukua saizi zilizo nyuma ya kipengele, inazififisha na kuzichora ndani ya kipengele chako.
Kwa sababu hii inahitaji kivinjari kuhesabu tena saizi kila wakati mtumiaji anapofungua au kusogeza ukurasa, ni sifa inayoharakishwa na vifaa. Jenereta ya Utiliome inahesabu vipimo hivi vya vifaa papo hapo, ikikuruhusu kuona athari ya utendaji kwa muda halisi.
Jibu la Haraka: Tailwind CSS inatoa zana zilizojengwa ndani kwa ajili ya madoido ya kioo. Unachanganya 'backdrop-blur-md', 'bg-white/30', na mpaka mwembamba 'border-white/20' ili kuunda mwonekano wa kioo papo hapo bila kuandika CSS ya kawaida.
Wakati kuandika CSS ya kawaida ni nzuri kwa kujifunza, waendelezaji wa kisasa mara nyingi wanapendelea mifumo ya zana kama Tailwind.
Ili kujenga kadi ya kioo katika Tailwind, unahitaji safu tatu muhimu:
backdrop-blur-md au backdrop-blur-lg kufifisha mandhari ya nyuma.bg-white/20 (kwa muonekano wa mwanga) au bg-slate-900/40 (kwa muonekano wa giza) ili kuipa kioo uwepo wake wa kimaumbile.border border-white/20.Jenereta ya Utiliome inatoa swichi ya kutoa CSS ya kawaida au mfululizo wa madarasa ya Tailwind yaliyopangwa vyema.
Jibu la Haraka: Safari kihistoria imehitaji kiambishi awali cha '-webkit-' kwa ajili ya backdrop filters. Ukiondoa kiambishi hiki, athari yako ya kioo itafeli kabisa kwenye vifaa vya iOS na macOS, na kuwa kisanduku cha uwazi tu.
Kosa kubwa kwa waendelezaji chipukizi wanapotengeneza glassmorphism ni kusahau vifaa vya Apple. Wakati Chrome na Firefox zinasaidia sifa ya kawaida ya backdrop-filter, Safari (wasaa wa matoleo ya zamani ya iOS) inahitaji sana kiambishi awali cha mchuuzi.
Ukikosa kujumuisha -webkit-backdrop-filter: blur(10px);, watumiaji wa Apple wataona tu kisanduku chenye uwazi cha kuchanganya, na kufanya maandishi yako yasisomeke kabisa juu ya mandhari ya nyuma.
Jenereta ya CSS ya Utiliome inaingiza kiotomatiki viambishi awali vinavyohitajika vya WebKit kwenye msimbo wako wa matokeo, kuhakikisha muundo wako unaonekana sawa kwenye mifumo yote mikuu ya uendeshaji.
Jibu la Haraka: Glassmorphism mara nyingi husababisha kufeli kwa ufikiaji kwa sababu maandishi yaliyowekwa juu ya nyuma iliyofifishwa na yenye rangi yanaweza kufeli uwiano wa utofautishaji wa WCAG. Lazima uhakikishe rangi ya maandishi ni nene au nyepesi ya kutosha dhidi ya kioo.
Uhakiki wa kawaida wa mtindo wa glassmorphism ni ufikiaji duni. Ikiwa picha ya nyuma yenye rangi inabadilika kutoka bluu nzito hadi manjano angavu nyuma ya kadi yako ya kioo, maandishi meupe yanaweza kuonekana hayajisomeki kabisa mara moja.
Ili kurekebisha hili, lazima utumie rangi nzito ya nyuma (opacity). Kwa mfano, ikiwa unatumia maandishi meupe, hakikisha rangi ya nyuma ya kioo chako ni kama rgba(0, 0, 0, 0.6). Hii inahakikisha kuwa bila kujali picha gani inapita nyuma ya kioo, maandishi yatadumisha uwiano wa chini wa utofautishaji wa 4.5:1 unaohitajika kisheria.
Jibu la Haraka: Bamba la kioo lililofifishwa lililowekwa moja kwa moja kwenye uso halionekani kama kioo. Lazima uliranyue kwa kutumia kivuli kilichotawanyika sana (k.m., box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) ili kitengane na safu ya nyuma.
Ubongo wa binadamu unahitaji ishara za mwanga ili kutafsiri kina. Ukififisha tu mandhari ya nyuma, kiolesura kinaweza kuonekana kuwa chenye 'bapa'.
Ili kufanya kioo kitokeze, unahitaji kukinyanyua kwenye Z-axis. Jenereta ya Utiliome inakuwezesha kurekebisha box-shadow laini. Kwa kuweka wepesi wa kivuli kuwa chini sana (karibu 10%) lakini ukiongeza eneo la blur kuwa juu sana (32px), unatengeneza athari laini inayotenganisha kioo vizuri kutoka kwenye mandhari ya nyuma yenye rangi.
Kila kitu unachohitaji kujua kuhusu kutumia Utiliome ya bure mtandaoni Jenereta ya Glassmorphism CSS.
Safari inahitaji kiambishi awali cha '-webkit-backdrop-filter'. Utiliome inazalisha kiambishi hiki kiotomatiki kwenye CSS ili kuhakikisha uoanifu wa vivinjari.
Ndiyo. Jenereta ya Utiliome inajumuisha swichi ya kutafsiri muundo wako kuwa madarasa ya huduma ya Tailwind (k.m., backdrop-blur-md bg-white/30).
Ndiyo, matumizi ya blur kubwa kwenye vipengele vikubwa yanaweza kusababisha kuchelewa kwenye simu zenye uwezo mdogo kwani inalazimisha GPU kuhesabu tena saizi wakati wa kusogeza ukurasa.
Kioo halisi kinarudisha mwanga kwenye kingo zake. Ongeza mpaka wa 1px wenye opacity ya chini sana (kama rgba(255, 255, 255, 0.2)) ili kuiga mwanga huo wa ukingoni.
Ndiyo, ni 100% bure bila kikomo, matangazo, wala hitaji la kujisajili akaunti.
Je, una ombi la kipengele au umepata hitilafu? Zungumza nasi moja kwa moja kwenye Discord.