Utiliome

Jenereta ya Glassmorphism CSS

Tengeneza madoido ya kisasa ya kioo. Rekebisha blur, uwazi, na mipaka, kisha nakili CSS kwenye mradi wako. 100% bure.

Glass Properties

10px
0.20
0.30

Glassmorphism

The trendy frosted glass effect for modern web design.

Drag me around!

Zana Zinazohusiana

Zana ambazo unaweza pia kuhitaji

Kizalisha Rangi za Picha

Tengeneza, rekebisha, na pakua palette za rangi na gradients za UI.

Kizalisha Gradient cha CSS

Tengeneza na urembeshe gradients za CSS na unakili msimbo papo hapo.

Tenganisha Rangi za Picha

Pakia picha ili kutenga palette yake ya rangi papo hapo.

Kiondoa Rangi Kuu ya Picha

Pakia picha ili kutenga rangi zake kuu papo hapo.

Kizalisha Favicon

Zalisha favicons za kawaida na za azimio la juu kwa ajili ya tovuti zako.

Kizalisha ICO

Badilisha picha kuwa muundo wa ICO kwa ajili ya icons za Windows na favicons.

Faragha 100% • Hakuna Kupakia Faili kwenye Server

Kwa nini Utumie Utiliome Bure Jenereta ya Glassmorphism CSS?

Imejengwa kuanzia mwanzo kwa ajili ya faragha kamili, utekelezaji wa papo hapo, na bila vizuizi. Hakuna usajili au malipo yanayohitajika.

Uwanja wa Muonekano

Rekebisha utovu wa uwazi (blur), wepesi, na uenezaji wa rangi mubashara juu ya mandhari ya nyuma ili kuona muonekano wa kioo chako papo hapo.

CSS ya Vivinjari Vyote

Inazalisha kiotomatiki msimbo wa backdrop-filter wenye kiambishi awali cha webkit ili kuhakikisha uoanifu kwenye Safari, Chrome, na Firefox.

Inaoana na Tailwind

Zalisha madarasa ya kawaida ya CSS au utafsiri muundo wako kuwa madarasa ya huduma ya Tailwind CSS papo hapo.

Bila Kuzuia Mfumo

Utekelezaji wa 100% upande wa mtumiaji unawezesha kuburuta vitelezi na kuona mabadiliko ya CSS bila kuchelewa.

Utiliome dhidi ya Njia Mbadala za Wingu

Lanisha injini yetu ya WebAssembly kwenye kivinjari chako dhidi ya zana za zamani za wingu.

Kipengele Utiliome (Kivinjari cha Mtaani) 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

Jinsi ya Kutumia Jenereta ya Glassmorphism CSS kwa Hatua 3 Rahisi

Hakuna usakinishaji wa programu unaohitajika. Kila kitu kinafanyika moja kwa moja ndani ya kivinjari chako.

1

Rekebisha Blur

Tumia kitelezi cha blur kuamua jinsi vipengele vya nyuma vinavyopaswa kufifishwa nyuma ya kadi yako ya kioo.

2

Weka Opacity na Rangi

Badilisha njia ya alpha ya rangi ya nyuma ili kutoa kioo chako mwonekano wa giza au mwonekano mweupe unaochanganika.

3

Nakili CSS

Bofya kitufe cha kuhamisha ili kunakili kipande cha msimbo wa CSS tayari kwa matumizi moja kwa moja kwenye ubao wako wa kunakili.

Mtindo wa Glassmorphism UI ni Nini?

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.

Sifa ya CSS ya backdrop-filter Inafanyaje Kazi?

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.

Kutengeneza Glassmorphism katika Tailwind CSS

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:

  • Blur: Tumia backdrop-blur-md au backdrop-blur-lg kufifisha mandhari ya nyuma.
  • Rangi ya Nyuma: Tumia bg-white/20 (kwa muonekano wa mwanga) au bg-slate-900/40 (kwa muonekano wa giza) ili kuipa kioo uwepo wake wa kimaumbile.
  • Ukingo: Kioo halisi kinashika mwanga kwenye kingo zake. Simulia hii kwa kutumia mpaka mwembamba wa 1px kwa kutumia border border-white/20.

Jenereta ya Utiliome inatoa swichi ya kutoa CSS ya kawaida au mfululizo wa madarasa ya Tailwind yaliyopangwa vyema.

Kutatua Uoanifu wa Vivinjari (Masuala ya Safari)

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.

Ufikiaji (a11y) na Utofautishaji wa Maandishi kwenye Glassmorphism

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.

Kuongeza Mwangaza Halisi kwa Vivuli vya Drop Shadows

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.

Jenereta ya Glassmorphism CSS Maswali ya Mara kwa Mara na Mwongozo wa Kiufundi

Kila kitu unachohitaji kujua kuhusu kutumia Utiliome ya bure mtandaoni jenereta ya glassmorphism bure mtandaoni.

Kwa nini athari yangu ya kioo haifanyi kazi kwenye Safari?

Safari inahitaji kiambishi awali cha '-webkit-backdrop-filter'. Utiliome inazalisha kiambishi hiki kiotomatiki kwenye CSS ili kuhakikisha uoanifu wa vivinjari.

Je, naweza kutumia Glassmorphism kwenye Tailwind CSS?

Ndiyo. Jenereta ya Utiliome inajumuisha swichi ya kutafsiri muundo wako kuwa madarasa ya huduma ya Tailwind (k.m., backdrop-blur-md bg-white/30).

Je, backdrop-filter inapunguza kasi ya tovuti?

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.

Nafanyaje ili kingo za kioo zionekane za kweli?

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.

Je, jenereta hii ya CSS ni bure kabisa?

Ndiyo, ni 100% bure bila kikomo, matangazo, wala hitaji la kujisajili akaunti.