Jenereta ya Neumorphism

Zana zote

Buni nyuso laini, zilizojitokeza za UI ya neumorphic zenye vivuli viwili na nakili CSS.

Onyesho la awali
CSS
—

Mandharinyuma ya turubai inalingana na rangi ya kipengele — ndilo linalofanya muonekano laini, uliojitokeza wa neumorphic ufanye kazi.

Rangi ya msingi
Inatumika kwa kipengele na mandharinyuma yake.
Umbo
Chanzo cha mwanga
200px
50px
20px
15%
60px

Kwa kawaida vivuli vya mwanga na giza hutokana na rangi ya msingi. Washa ili kuvipanga mwenyewe.

Kuhusu Jenereta ya Neumorphism

Kitengenezaji cha Neumorphism kinaunda muonekano laini uliochomozwa wa "soft UI": kipengele kinachoonekana kama kimechomozwa nje — au ndani — ya uso ulio nyuma yake. Chagua rangi moja ya msingi na chombo kitatokeza kila kitu kingine, kwa sababu athari hii hufanya kazi tu wakati kipengele na mandhari yake ya nyuma zina rangi moja, huku kina kikitokana kabisa na vivuli viwili vya box-shadow vinavyopingana.

Vitelezi hudhibiti umbo: ukubwa, mviringo wa pembe, umbali wa vivuli, ukali wake na ukungu. Njia nne za umbo — flat, concave, convex na pressed — hubadilisha gradient ya ndani na mwelekeo wa kivuli, na kichaguzi cha chanzo cha mwanga huhamisha mng'ao kwenda kwenye moja ya pembe nne ili kipengele kilingane na mwanga wa muundo wako.

Kwa kawaida rangi za vivuli vyepesi na vya giza hukokotwa kutoka kwenye rangi ya msingi, lakini njia ya mikono hukuruhusu kuweka zote mbili mwenyewe. CSS iliyotengenezwa — background, radius na box-shadow mbili — iko mbofyo mmoja tu.

Jinsi ya kutumia Jenereta ya Neumorphism

  1. Chagua rangi ya msingi — hutumika kwa kipengele na kwenye kanvasi ya nyuma yake pia.
  2. Chagua umbo: flat, concave, convex au pressed.
  3. Weka pembe ya chanzo cha mwanga ili kudhibiti mahali mng'ao unapoanguka.
  4. Rekebisha ukubwa, mviringo wa pembe, umbali, ukali na ukungu kwa vitelezi.
  5. Washa rangi za vivuli za mikono ikiwa unataka kubadilisha vivuli vya kawaida vya mwanga na giza.
  6. Nakili CSS na uibandike kwenye kipengele chako.

Maswali yanayoulizwa mara kwa mara

Neumorphism inategemea kipengele kushiriki rangi ya mandhari na uso ulio nyuma yake. Weka kipengele ndani ya kontena chenye rangi ya msingi sawa — kwenye mandhari nyeupe au yenye mkanganyiko, vivuli hivyo viwili vitaonekana kama mwanga, si kina.

Flat huweka uso rahisi bila mabadiliko; convex huongeza gradient inayofanya kiuvimbe nje; concave hukifanya kizame ndani; pressed hugeuza vivuli kabisa ili kipengele kionekane kimezama ndani ya uso — hali ya kawaida ya kitufe kilichobonyezwa.

Vivuli viwili vya box-shadow kwenye pembe zinazopingana: kimoja cha giza kinachoiga kivuli na kingine chepesi kinachoiga mng'ao, vyote vikitokana na rangi ya msingi. Umbali huvitenganisha, ukungu huvilainisha, na ukali hudhibiti ni kwa kiasi gani vinaacha rangi ya msingi.

Itumie kwa uangalifu. Mtindo huu kwa asili una mkanganyiko mdogo, hivyo iunganishe na maandishi yanayosomeka wazi, hali dhahiri za focus, na viwango vya kutosha vya mkanganyiko kwa vipengele vinavyoshirikiana — hifadhi muonekano huu laini kwa nyuso za mapambo pale inapowezekana.

Ndiyo, ni bure na kinafanya kazi kabisa kwenye kivinjari chako. Rekebisha, angalia matokeo na nakili CSS mara nyingi kadri unavyotaka bila akaunti.
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 neumorphism css jenereta ya kivuli laini ya soft ui neumorphic box shadow css jenereta ya neumorphism box shadow jenereta ya kivuli laini ya css zana ya muundo wa neumorphism jenereta ya inset shadow css css dual box shadow
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.