Jenereta ya Glassmorphism

Zana zote

Unda kadi za UI za kioo chenye ukungu zenye ukungu wa nyuma, uwazi na mipaka, kisha nakili CSS.

Onyesho la awali

Kadi ya Kioo

Kioo chenye ukungu kinachoelea juu ya mandharinyuma changamfu.

Mandharinyuma
Matokeo ya CSS
—

Hutoa backdrop-filter na -webkit-backdrop-filter zote. Kumbuka: backdrop-filter haitumiki katika vivinjari vya zamani (mfano Firefox chini ya 103); ongeza mandharinyuma imara ya kurudia kwa vile.

px
%
px
Ujazo wa kioo
20%
Mpaka
30%
Mipangilio ya ubora

Kuhusu Jenereta ya Glassmorphism

Kitengenezaji cha Glassmorphism hujenga athari ya kadi ya kioo chenye ukungu: paneli inayopenyeza mwanga inayotia ukungu chochote kilicho nyuma yake. Vitelezi hudhibiti ukungu na ung'aavu wa backdrop-filter, rangi ya kivuli cha kioo na upenyezaji wake, rangi na uwazi wa ukingo, mviringo wa pembe na kivuli cha nje — kila mabadiliko huonyeshwa papo hapo juu ya mandhari yenye rangi ili uweze kuhukumu athari kwa uhalisia.

Mifano minne ya ubora — subtle, frosted, vivid na dark glass — hukupa mchanganyiko uliothibitishwa wa kuanzia. Mfano wa dark unaonyesha jinsi mtindo huo huo unavyobadilika kwenye miingiliano ya giza, ambapo ukingo mwepesi wa mwanga hufanya kazi kubwa ya kutenganisha kioo na mandhari.

CSS iliyotengenezwa inajumuisha backdrop-filter pamoja na kiambishi -webkit-backdrop-filter kinachohitajika na Safari. Kumbuka tahadhari ya uoanifu: vivinjari vya zamani (kwa mfano Firefox kabla ya toleo la 103) havitumii backdrop-filter, hivyo weka mandhari mbadala imara kwa ajili yake.

Jinsi ya kutumia Jenereta ya Glassmorphism

  1. Anza kwa mfano — subtle, frosted, vivid au dark glass — au kutoka kwenye mipangilio ya kawaida.
  2. Rekebisha ukungu na ung'aavu wa backdrop filter.
  3. Weka rangi ya kivuli cha kioo na upenyezaji wake.
  4. Rekebisha rangi ya ukingo, uwazi wa ukingo, mviringo wa pembe na kivuli cha nje.
  5. Nakili CSS — tayari inajumuisha sifa yenye kiambishi -webkit- kwa ajili ya Safari.

Maswali yanayoulizwa mara kwa mara

Paneli hupewa rangi ya mandhari yenye uwazi wa nusu, na backdrop-filter: blur() hutia ukungu chochote kinachoonekana nyuma yake. Kuongezwa kwa ung'aavu huhifadhi rangi za ukungu zikiwa hai, na ukingo mwepesi wenye uwazi wa nusu huufanya ukingo wa kioo uonekane halisi.

backdrop-filter inahitaji mandhari yenye uwazi wa nusu kwenye kipengele pamoja na uungwaji mkono wa kivinjari — Firefox iliuwezesha tu kuanzia toleo la 103. Safari inahitaji kiambishi -webkit-backdrop-filter, ambacho tayari kimo kwenye CSS iliyotengenezwa. Daima fafanua mandhari mbadala imara.

Udhibiti wa mkanganyiko. Ongeza ukungu au punguza uwazi hadi maandishi yatimize miongozo ya mkanganyiko dhidi ya mandhari yenye shughuli nyingi zaidi, na ongeza ukingo ili ukingo wa kadi ubaki wazi juu ya maeneo mepesi na ya giza.

Ni miongoni mwa athari ghali zaidi za CSS, kwa sababu kivinjari hutia ukungu upya kila mara maudhui yanaposogea. Itumie kwenye nyuso chache muhimu badala ya kadi nyingi zilizorundikwa, na jaribu kusogeza kwenye vifaa vya kawaida vya simu.

Ndiyo, ni bure kabisa na kinafanya kazi kwenye kivinjari — rekebisha vitelezi na nakili CSS bila akaunti na bila kupakia chochote.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Border Radius Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi. Bila Malipo
Utafutaji maarufu
jenereta ya glassmorphism css jenereta ya css glassmorphism athari ya kioo chenye ukungu css backdrop-filter blur css jenereta ya kadi ya kioo css kitengeneza athari ya kioo css jenereta ya mandharinyuma ya glassmorphism jenereta ya kadi ya ukungu css
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.