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

Bí Ó Ṣe Ń Ṣiṣẹ́

Olùmújáde box-shadow jẹ́ irinṣẹ́ React tí ó jẹ́ ẹgbẹ́-oníbàárà pátápátá — kò sí sáfà, kò sí ìwé-ìṣirò. Ó ń pa àtòjọ àwọn ohun ìpele òjìji mọ́ nínú ipò, ó ń kó àwọn ọ̀wọ́ ọ̀rọ̀ CSS box-shadow tí ó tọ́ papọ̀ ní gbogbo ìyípadà pẹ̀lú ẹ̀rọ àgbékalẹ̀ rgba() tí a fi ọwọ́ kọ, ó sì ń fi wọ́n sílo tààrà sí ẹ̀yà àkíyèsí nípasẹ̀ àkànṣe style ti React nítorí náà ẹ́ńjìnnì àwòrán aṣàwákiri fúnrarẹ̀ ń yà àbájáde náà lẹ́sẹ̀kẹsẹ̀.

1. 1
   Àwọn ìwọ̀n ìpele ń fún ẹ̀rọ àgbékalẹ̀ náà

   Ìpele òjìji kọ̀ọ̀kan ń fi àwọn ìṣípò x/y, blur, spread, àwọ̀ hex, àti iye ìhòhò pamọ́. Ní gbogbo ìyípadà, iṣẹ́ shadowToCss kékeré kan ń yí àwọ̀ hex padà sí àwọn ẹ̀ka RGB pẹ̀lú regex, ó sì ń kó ọ̀wọ́ ọ̀rọ̀ rgba() papọ̀ — fún àpẹẹrẹ, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). A ń so àwọn ìpele púpọ̀ pọ̀ pẹ̀lú kọ́mà.
2. 2
   Aṣàwákiri náà ń ṣe àwòrán àkíyèsí náà láàyè

   A ń fi ọ̀wọ́ ọ̀rọ̀ tí a kó papọ̀ sí àkànṣe àṣàrò boxShadow ti ẹ̀yà div tààrà nínú JSX. React ń mú àkànṣe DOM náà dójú ìwọ̀n, ẹ́ńjìnnì CSS aṣàwákiri sì ń ya òjìji náà lẹ́sẹ̀kẹsẹ̀ — kò sí canvas tàbí WebGL tí ó kàn, àwòrán CSS abínibí nìkan.
3. 3
   Fífà-láti-ṣètò-ipò ń lo API Pointer Events

   Títẹ̀ àti fífà àpótí àkíyèsí náà ń pe setPointerCapture lórí ẹ̀yà náà, ó sì ń tọpasẹ̀ àwọn ìyípadà onPointerMove láti ṣàtúnṣe ìṣípò x àti y ìpele tí ń ṣiṣẹ́ ní àkókò gidi. Dídì Shift mú ìwọ̀n ìpín 0.25x wá fún ìtòlẹ́sẹẹsẹ ọlọ́rọ̀-ìpín.
4. 4
   A ń dàkọ ìtọjade sí clipboard

   Irinṣẹ́ náà ń mú ìrísí ìtọjade méjì jáde láti inú dátà ìpele kan náà: ìkéde CSS box-shadow déédéé, àti kíláàsì iye-àṣàrò Tailwind (shadow-[...]) níbi tí a ti rọ́pò àyè pẹ̀lú underscore gẹ́gẹ́ bí àwọn òfin gírámà Tailwind. Dàkọ ìtẹ̀-kan ń lo navigator.clipboard.writeText.

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