Olùmúdásílẹ̀ CSS Gradient Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Olùmújáde gradient ń kọ́ àwọn ọ̀wọ́ ọ̀rọ̀ gradient CSS tààrà nínú aṣàwákiri — kò sí ìwé-ìṣirò, kò sí sáfà, kò sí gbígbé sókè. Iṣẹ́ tí a fi ọwọ́ kọ ń kó gírámà linear-gradient, radial-gradient, tàbí conic-gradient tí ó tọ́ jọ láti inú àwọn ìdúró àwọ̀ àti igun rẹ ní àkókò gidi, kí ó sì ṣe àgbékalẹ̀ àbájáde náà fún àfojúsùn ìtọjade èyíkéyìí tí o yàn.

1. 1
   Ṣètò àwọn ìdúró àti ìtọ̀nà

   O ń ṣètò àwọn ìdúró àwọ̀ láàrin 2 sí 6 ní lílo àyàn àwọ̀ abínibí aṣàwákiri, kí o sì ṣètò ìdúró kọ̀ọ̀kan lórí àsà 0–100% pẹ̀lú ìtọ́ka àyè. Fún àwọn gradient linear àti conic o tún yan igun kan (0–360°); fún radial gradients o yan ìrísí (ellipse tàbí àyíká) àti kọ́kọ́rọ́ ìwọ̀n tí ó darí bí gradient náà ṣe gùn tó.
2. 2
   buildCss ń kó ọ̀wọ́ ọ̀rọ̀ gradient náà papọ̀

   Ní gbogbo ìyípadà, iṣẹ́ buildCss ládùúgbò ń kó àwọn ìwọ̀n rẹ papọ̀ sí ìpè iṣẹ́ CSS tí ó tọ́ — f.à. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Kò sí ìwé-ìṣirò tí ó kàn; a kó ọ̀wọ́ ọ̀rọ̀ náà pọ̀ pẹ̀lú ìlànà template JavaScript lásán tí a sì so pọ̀ tààrà láti inú àtòjọ ìdúró náà.
3. 3
   Àkíyèsí láàyè ń farahàn nípasẹ̀ àṣàrò tààrà

   A ń fi ọ̀wọ́ ọ̀rọ̀ gradient tí a kó papọ̀ sílo tààrà sí ẹ̀yà div gẹ́gẹ́ bí àṣàrò ẹ̀yìn tààrà, nítorí náà ẹ́ńjìnnì CSS aṣàwákiri fúnrarẹ̀ ń yà àkíyèsí náà. Kò sí canvas tàbí àwòrán tí ó kàn — ohun tí o rí gan-an ni àkànṣe CSS tí a fi sílo.
4. 4
   Ìtọjade tí ó ti ṣetán fún dídàkọ ní ìrísí mẹ́rin

   Olùyan ìrísí kan ń yí ọ̀wọ́ ọ̀rọ̀ gradient kan náà padà sí CSS lásán (background: ...), àkọ́sílẹ̀ CSS-pẹ̀lú-ìdúró-líle, kíláàsì iye-àṣàrò Tailwind, tàbí ìkéde ìtọ́ka SCSS. Títẹ̀ Dàkọ ń kọ ìtọjade tí a yàn sí clipboard nípasẹ̀ navigator.clipboard.writeText. A tún ń ṣe àmúlò gradient lọ́wọ́lọ́wọ́ sí inú hash URL nítorí náà o lè fi pamọ́ tàbí pín in.

Àwọn Irinṣẹ Tó Jọra