இலவச CSS பாக்ஸ் ஷாடோ உருவாக்கி

இது எவ்வாறு செயல்படுகிறது

box-shadow generator முழுமையாக client-side React கருவி — சர்வர் இல்லை, நூலகம் இல்லை. shadow layer objects பட்டியலை state இல் பராமரித்து, ஒவ்வொரு மாற்றத்திலும் கையால் எழுதிய rgba() formatter மூலம் சரியான CSS box-shadow strings ஐ உருவாக்கி, React இன் style prop வழியாக முன்னோட்ட உறுப்பில் நேரடியாகப் பயன்படுத்துகிறது; உலாவியின் சொந்த rendering இயந்திரம் முடிவை உடனே வரைகிறது.

1. 1
   Layer அளவுருக்கள் formatter க்கு உள்ளீடு

   ஒவ்வொரு shadow layer உம் x/y ஈடுகள், blur, spread, hex நிறம், opacity மதிப்பைச் சேமிக்கிறது. ஒவ்வொரு மாற்றத்திலும், சிறிய shadowToCss function regex மூலம் hex நிறத்தை RGB கூறுகளாக மாற்றி rgba() string ஐ உருவாக்குகிறது — எ.கா., 0px 4px 12px 0px rgba(0, 0, 0, 0.15). பல layers காற்புள்ளிகளால் இணைக்கப்படுகின்றன.
2. 2
   உலாவி நேரலை முன்னோட்டத்தை வரைகிறது

   உருவாக்கப்பட்ட string JSX இல் நேரடியாக div உறுப்பின் boxShadow style property க்கு ஒதுக்கப்படுகிறது. React DOM attribute ஐப் புதுப்பிக்கிறது, உலாவியின் CSS இயந்திரம் நிழலை உடனே வரைகிறது — canvas அல்லது WebGL இல்லை, native CSS rendering மட்டுமே.
3. 3
   இழுத்து-நிலைப்படுத்தல் Pointer Events API ஐப் பயன்படுத்துகிறது

   முன்னோட்டப் பெட்டியைக் கிளிக் செய்து இழுத்தால் உறுப்பில் setPointerCapture அழைக்கப்பட்டு, onPointerMove மாற்றங்களைக் கண்காணித்து செயலில் உள்ள layer இன் x, y ஈடுகள் நேரலையாகப் புதுப்பிக்கப்படுகின்றன. Shift ஐ அழுத்திப் பிடித்தால் நுண்ணிய நிலைப்படுத்தலுக்கு 0.25x அளவுக் காரணி பயன்படுத்தப்படும்.
4. 4
   வெளியீடு கிளிப்போர்டுக்கு நகலெடுக்கப்படுகிறது

   கருவி அதே layer தரவிலிருந்து இரண்டு வெளியீட்டு வடிவங்களைத் தருகிறது: நிலையான CSS box-shadow declaration, மற்றும் Tailwind syntax விதிகளின்படி இடைவெளிகள் underscores ஆக மாற்றப்பட்ட Tailwind arbitrary-value class (shadow-[...]). ஒரே கிளிக் நகல் navigator.clipboard.writeText ஐப் பயன்படுத்துகிறது.

தொடர்புடைய கருவிகள்