Kyauta Mai Ƙirƙirar Gradient na CSS

Yadda Yake Aiki

Mai ƙirƙirar gradient yana gina harufan gradient na CSS kai tsaye a burauza — babu ɗakin karatu, babu uwar garke, babu lodawa. Wani aiki da aka rubuta da hannu yana haɗa syntax linear-gradient, radial-gradient, ko conic-gradient daidai daga tashoshin launinka da kusurwa a lokaci na gaskiya, sannan yana tsara sakamakon ga wace manufar fitarwa ka zaɓa.

1. 1
   Saita tashoshi da alkibla

   Kana saita tsakanin tashoshi na launi 2 zuwa 6 ta amfani da mai zaɓen launi na asali na burauza, sannan ka sanya kowace tasha a kan gefen 0–100% da mai zamewar zango. Don gradient na linear da conic kana kuma zaɓen kusurwa (0–360°); don gradient na radial kana zaɓen siffa (ellipse ko circle) da kalmar girma wadda take sarrafa nisan da gradient din yake kaiwa.
2. 2
   buildCss yana haɗa harafin gradient

   A kowane canji, wani aikin buildCss na gida yana haɗa sigoginka zuwa daidai kiran aikin CSS — misali linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Babu ɗakin karatu da abin ya shafa; ana gina harafin da lissafin template na JavaScript sauƙi kuma an haɗa shi kai tsaye daga jerin tasha.
3. 3
   Dubawa mai rai yana zanawa ta salo na cikin gida

   Ana amfani da harafin gradient da aka haɗa kai tsaye zuwa wani abu na div a matsayin salo na bango na cikin gida, don haka injin CSS na burauzarka da kansa yana zana dubawa. Babu canvas ko hoto da abin ya shafa — abin da kake gani shine gaskiya dukiya ta CSS da ake amfani da ita.
4. 4
   Fitarwa a shirye don kwafi a tsari huɗu

   Wani mai zaɓen tsari yana canja iri ɗayan harafin gradient zuwa CSS sauƙi (background: ...), wani block na CSS-tare-da-madadin-cikakke, wani aji na Tailwind arbitrary-value, ko wani sanarwa na masu canji na SCSS. Danna Kwafi yana rubuta zaɓaɓɓen fitarwa zuwa clipboard ta navigator.clipboard.writeText. Ana kuma ɓoye gradient na yanzu a cikin hash na URL don ka iya yin alama ko raba shi.

Kayan Aiki Masu Alaƙa