DevTulz Online

Jenereta ya CSS Gradient

Kumwacha rangi

CSS Gradient ni nini?

CSS gradients inaundaje mabadiliko ya rangi salama mahali CSS, bila faili yoyote ya picha. Kuna aina tatu: linear-gradient inabadilika pamoja na mstari wa moja kwa moja, radial-gradient inachanganya kutoka katika hatua ya kituo kwa njia ya duara au ellipse, na conic-gradient inachanganya rangi kuzunguka hatua ya kituo kama gurudumu la rangi. Aina zote tatu zinakamatia alama nyingi za rangi — rangi za binafsi katika maeneo maalum — inakupa udhibiti kamili kwa mgawanyo wa rangi. Gradients hutumiwa kwa muundo wa heroe, uzani wa kitufe, tabaka, wao wa maendeleo, na wagawaji wa kimaanisha.

Jinsi ya Kutumia Jenereta ya CSS Gradient

  1. Chagua aina ya gradient: Linear, Radial, au Conic.

  2. Kwa gradients ya kulinganisha, sitara ya pembe ya sifa (0–360°) au andika pembe moja kwa moja.

  3. Kwa radients ya radial, chagua umbo: duara au ellipse.

  4. Hariri kumwacha rangi — bofya samani ya rangi kufungua njia ya rangi na kuzaa kumwacha nafasi ya kubaka.

  5. Bofya '+ Ongeza kumwacha rangi' kuongeza pointi ya mabadiliko zaidi ya rangi.

  6. Tazama muonekano wa live ku-nyaraka katika wakati halisi.

  7. Nakili CSS iliyoundwa na ubakize katika stylesheet yako.

Maswali Yanayoulizwa Mara Kwa Mara

Nijenga gradient ya uwazi alivyofanya? Tumia thamani za rangi za rgba() au hsla() na chaneli cha alpha cha 0 kwa uwazi kamili. Kwa mfano, rgba(0,0,0,0) ni nane nyeusi sana salama, muhimu kwa iruka za outaiti.

Nijenga mgomo wa rangi ngumu (bila mabadiliko)? Weka vituo viwili vya rangi katika nafasi sawa — mmoja anayeishia na mmoja anayeanza katika hatua hiyo. Kwa mfano, kuchangua 50%, bluu 50% inaundwa kubadili haraka kutoka kuchangua hadi bluu upande wa kati bila mabadiliko ya gradient.

Vikurasa vipi vinavyounga mkono vikurasa vya conic? Vikurasa vya conic vinaunguza vikurasa vyote vya kisasa (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Hakuna unga katika Intaneti Explorer.

Ninaweza kutumia vikurasa vingi kwenye kitu kimoja? Ndiyo. CSS background inakubali orodha ya tabaka iliyowekwa kwa koma. Unaweza kumeta gradients, kuchanganya nao na picha za background, na udhibiti nafasi na ukubwa wa kila tabaka kwa kujitegemea.

Keywords: Jenereta ya CSS gradient, gradient ya mstari, gradient ya radial, gradient ya conic, jenereta ya background ya CSS, njia ya uchaguzi wa rangi ya gradient, zana ya CSS gradient