Jenereta ya Box Shadow

Buruta vitelezi ili kuunda box-shadow, weka tabaka kwa kina zaidi, na unakili CSS iliyokamilika papo hapo.

Tabaka za kivuli
Tabaka 1
CSS
Rekebisha vitelezi ili kuunda umbo la kivuli chako.

Kila kivuli kinatengenezwa kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Maswali Yanayoulizwa Sana

Je, mchepuko, ufifishaji, na usambazaji vinadhibiti nini hasa?

Mchepuko (Offset) husogeza kivuli kushoto/kulia na juu/chini, ufifishaji (blur) hulainisha kingo zake, na usambazaji (spread) hukuza au kuupunguza kabla ya kufifisha. Usambazaji hasi huvuta kivuli ndani, jambo ambalo ni muhimu kwa kivuli chembamba na cha karibu.

Je, chaguo la inset linafanya kazi gani?

Kivuli cha kawaida huangukia nje ya elementi, kama mwanga nyuma ya kadi iliyonyanyuliwa. Chaguo la Inset hukigeuza ndani badala yake, ili elementi ionekane imebonyezeka — ni muhimu kwa sehemu za kuingiza data zilizobonyea au vitufe vilivyobonyezwa.

Kwa nini uweke tabaka zaidi ya moja la kivuli?

Kivuli kimoja kinaonekana bapa kikizidi saizi fulani. Mwinuko halisi kawaida huchanganya kivuli chembamba na cheusi pamoja na kivuli laini na kipana zaidi — ongeza tabaka la pili na urekebishe kila moja kivyake ili kupata athari hiyo.

Jinsi Chombo Hiki Kinavyofanya Kazi

Chombo hiki kinakuwezesha kuunda "box-shadow" maalum kwa ajili ya vipengele vya muundo kwa kurekebisha sifa mbalimbali kwa kutumia vitelezi. Unaweza kuweka tabaka nyingi za kivuli ili kupata madoido changamano ya picha na kunakili papo hapo msimbo wa CSS uliotengenezwa kwa ajili ya kuutumia kwenye miradi yako.

Kila kivuli kinatengenezwa kwenye kivinjari chako. Hakuna unachoweka hapa kinachopakiwa kwenye BroBroGo.

Vipengele vya Kuingiza Data (Inputs)

Ili kutengeneza kivuli chako, unaweza kurekebisha vipengele vifuatavyo kwenye kiolesura:

  • Mchepuko wa mlalo: Kitelezi cha kusogeza kivuli kushoto au kulia, kuanzia -50px hadi 50px.
  • Mchepuko wa wima: Kitelezi cha kusogeza kivuli juu au chini, kuanzia -50px hadi 50px.
  • Ufifishaji (Blur): Kitelezi cha kulainisha kingo za kivuli, kuanzia 0px hadi 100px.
  • Usambazaji (Spread): Kitelezi cha kukuza au kupunguza kivuli kabla ya kufifisha, kuanzia -50px hadi 50px.
  • Rangi ya kivuli: Kichagua rangi kwa ajili ya kuchagua rangi ya kivuli chako.
  • Uangavu (Opacity): Kitelezi cha kurekebisha uwazi wa kivuli.
  • Kivuli cha ndani (Inset): Kitufe cha kugeuza kinachofanya kivuli kionekane ndani ya kipengele.
  • Ongeza tabaka: Kitufe cha kuongeza tabaka la ziada la kivuli.
  • Ondoa tabaka: Kitufe cha kuondoa tabaka la kivuli.

Matokeo ya Chombo (Outputs)

Chombo hiki kinaonyesha matokeo na thamani zifuatazo kulingana na usanidi wako:

  • Tabaka: Lebo kwa ajili ya kila tabaka la kivuli binafsi.
  • Mchepuko wa mlalo: Thamani ya sasa ya mchepuko wa mlalo kwa ajili ya tabaka husika.
  • Mchepuko wa wima: Thamani ya sasa ya mchepuko wa wima kwa ajili ya tabaka husika.
  • Ufifishaji (Blur): Thamani ya sasa ya ufifishaji kwa ajili ya tabaka husika.
  • Usambazaji (Spread): Thamani ya sasa ya usambazaji kwa ajili ya tabaka husika.
  • Rangi ya kivuli: Rangi iliyochaguliwa kwa ajili ya tabaka husika.
  • Uangavu (Opacity): Thamani ya sasa ya uangavu kwa ajili ya tabaka husika.
  • Kivuli cha ndani (Inset): Hali ya sasa (imewashwa/imezimwa) ya chaguo la kivuli cha ndani kwa ajili ya tabaka husika.
  • CSS: Msimbo wa CSS uliotengenezwa kwa ajili ya box shadow.

Sheria za Utendaji na Hali Maalum

Wakati wa kutumia chombo hiki, kuna sheria na mipaka maalum ya utendaji inayofanya kazi nyuma ya mfumo:

  • Vitelezi vya Mchepuko wa mlalo, Mchepuko wa wima, Ufifishaji (Blur), na Usambazaji (Spread) vinasasisha matokeo ya CSS papo hapo.
  • Mchepuko wa mlalo una upeo wa kuanzia -50px hadi 50px.
  • Mchepuko wa wima una upeo wa kuanzia -50px hadi 50px.
  • Ufifishaji (Blur) una upeo wa kuanzia 0px hadi 100px.
  • Usambazaji (Spread) una upeo wa kuanzia -50px hadi 50px.
  • Thamani hasi ya usambazaji huvuta kivuli ndani.
  • Chaguo la "Kivuli cha ndani (Inset)" hugeuza kivuli ndani ya kipengele.
  • Kuongeza tabaka jipya kunatengeneza tabaka la kivuli lenye thamani za msingi.
  • Kuondoa tabaka kunafuta tabaka la kivuli lililochaguliwa.
  • Wakati tabaka nyingi zinapokuwepo, msimbo wa CSS unaonyesha thamani zake zikiwa zimetenganishwa kwa koma.
  • Chombo hiki kinakuja kikiwa kimeandaa tabaka tano mapema, ambapo tabaka la kwanza lina thamani za msingi za 0 8 24 -4 na rangi nyeusi yenye uangavu wa 18%, huku tabaka zingine zikiwa zimefichwa mwanzoni.

Walengwa wa Chombo Hiki

Chombo hiki kimeundwa mahususi kwa ajili ya:

  • Mtu yeyote anayetaka kutengeneza box-shadow kwa ajili ya kipengele cha wavuti.
  • Mtumiaji anayehitaji kutengeneza kivuli chembamba na cha karibu.
  • Mtumiaji anayetaka kutengeneza kivuli laini na kipana zaidi.
  • Mtu anayetafuta namna ya kufanya kipengele kionekane kimebonyezeka ndani, kama sehemu ya kuingiza data iliyobonyea au kitufe kilichobonyezwa.
  • Mbunifu au msanidi wa programu za wavuti (front-end developer) anayehitaji kuweka tabaka nyingi za kivuli ili kuleta hisia ya kina na mwelekeo.

Maswali Yanayoulizwa Mara kwa Mara (FAQ)

Je, mchepuko, ufifishaji, na usambazaji vinadhibiti nini hasa?
Mchepuko (Offset) husogeza kivuli kushoto/kulia na juu/chini, ufifishaji (blur) hulainisha kingo zake, na usambazaji (spread) hukuza au kuupunguza kabla ya kufifisha. Usambazaji hasi huvuta kivuli ndani, jambo ambalo ni muhimu kwa kivuli chembamba na cha karibu.

Je, chaguo la inset linafanya kazi gani?
Kivuli cha kawaida huangukia nje ya elementi, kama mwanga nyuma ya kadi iliyonyanyuliwa. Chaguo la Inset hukigeuza ndani badala yake, ili elementi ionekane imebonyezeka — ni muhimu kwa sehemu za kuingiza data zilizobonyea au vitufe vilivyobonyezwa.

Kwa nini uweke tabaka zaidi ya moja la kivuli?
Kivuli kimoja kinaonekana bapa kikizidi saizi fulani. Mwinuko halisi kawaida huchanganya kivuli chembamba na cheusi pamoja na kivuli laini na kipana zaidi — ongeza tabaka la pili na urekebishe kila moja kivyake ili kupata athari hiyo.