Kyauta Mai Ƙirƙirar CSS Box Shadow

Yadda Yake Aiki

Mai ƙirƙirar box-shadow kayan aikin React ne na gefen abokin ciniki gaba ɗaya — babu uwar garke, babu ɗakin karatu. Yana ci gaba da jerin abubuwan sashin inuwa a yanayi, yana haɗa harafin CSS box-shadow masu inganci a kowane canji ta amfani da mai tsara rgba() da aka rubuta da hannu, kuma yana amfani da su kai tsaye ga wani abu na dubawa ta hanyar style prop na React don injin zanawa na burauzarka da kansa ya zana sakamakon nan take.

1. 1
   Ma'aunan sashi suna ciyar da mai tsara

   Kowace sashin inuwa yana ajiye ƙarawar x/y, blur, spread, launin hex, da ƙimar opacity. A kowane canji, wani karamin aiki shadowToCss yana canja launin hex zuwa sassan RGB da wani na'ura mai fahimta, sannan yana haɗa harafin rgba() — misali 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Ana haɗa sassa da yawa da waƙafi.
2. 2
   Burauza tana zana dubawar rai

   Ana sanya harafin da aka haɗa zuwa dukiyar salo boxShadow na wani abu na div kai tsaye a JSX. React yana sabunta abin DOM, kuma injin CSS na burauza yana zana inuwar nan take — babu canvas ko WebGL da abin ya shafa, kawai zanawa ta CSS na asali.
3. 3
   Ja-don-sanyawa yana amfani da Pointer Events API

   Dannawa da jan akwatin dubawa yana kiran setPointerCapture a kan abin, sannan yana bin bambancin onPointerMove don sabunta ƙarawar x da y na sashin da yake aiki a lokaci na gaskiya. Riƙe Shift yana amfani da ma'aunin 0.25x don sanyawa mai kyau.
4. 4
   Ana kwafin fitarwa zuwa clipboard

   Kayan aikin yana samar da tsari biyu na fitarwa daga iri ɗayan bayanan sashi: bayanin CSS box-shadow na al'ada, da aji na Tailwind arbitrary-value (shadow-[...]) inda ake maye gurbin fararen sarari da underscores bisa ka'idojin tsari na Tailwind. Kwafi da dannawa ɗaya yana amfani da navigator.clipboard.writeText.

Kayan Aiki Masu Alaƙa