मोफत CSS बॉक्स शॅडो जनरेटर

हे कसे कार्य करते

box-shadow जनरेटर हे पूर्णपणे क्लायंट-साइड React साधन आहे — सर्व्हर, लायब्ररी नाही. ते state मध्ये shadow layer ऑब्जेक्ट्सची यादी ठेवते, गराज-लिहिलेल्या rgba() फॉरमॅटरचा वापर करून प्रत्येक बदलावर वैध CSS box-shadow स्ट्रिंग एकत्र करते, आणि React च्या style prop द्वारे त्या थेट preview घटकावर लावते त्यामुळे ब्राउझरचे स्वतःचे रेंडरिंग इंजिन निकाल तात्काळ काढते.

1. 1
   लेयर पॅरामीटर्स फॉरमॅटरला डेटा पुरवतात

   प्रत्येक shadow layer x/y ऑफसेट्स, blur, spread, hex रंग आणि opacity मूल्य साठवते. प्रत्येक बदलावर, एक लहान shadowToCss फंक्शन regex ने hex रंगाला RGB घटकांमध्ये रूपांतरित करते, नंतर rgba() स्ट्रिंग एकत्र करते — उदाहरणार्थ, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). अनेक layers स्वल्पविरामांनी जोडल्या जातात.
2. 2
   ब्राउझर लाइव्ह प्रिव्ह्यू रेंडर करतो

   एकत्र केलेली स्ट्रिंग JSX मध्ये थेट div घटकाच्या boxShadow style property ला दिली जाते. React DOM attribute अपडेट करतो, आणि ब्राउझरचे CSS इंजिन shadow तात्काळ रंगवते — कोणतेही canvas किंवा WebGL सामील नाही, फक्त native CSS रेंडरिंग.
3. 3
   Drag-to-position Pointer Events API वापरते

   preview बॉक्स क्लिक आणि ड्रॅग केल्याने घटकावर setPointerCapture कॉल होतो, नंतर सक्रिय layer चे x आणि y ऑफसेट्स रिअल टाइममध्ये अपडेट करण्यासाठी onPointerMove डेल्टा ट्रॅक होतात. Shift धरल्याने सूक्ष्म स्थान बदलासाठी 0.25x स्केल घटक लावला जातो.
4. 4
   आउटपुट clipboard वर कॉपी होतो

   साधन एकाच layer डेटावरून दोन आउटपुट फॉरमॅट्स तयार करते: मानक CSS box-shadow declaration, आणि Tailwind arbitrary-value class (shadow-[...]) जिथे Tailwind च्या सिंटॅक्स नियमांनुसार जागा underscores ने बदलली जातात. एक-क्लिक कॉपी navigator.clipboard.writeText वापरते.

संबंधित साधने