CSS Box Shadow जनरेटरचे कार्य आणि रचना
CSS मधील box-shadow प्रॉपर्टी वेब डिझाइनमध्ये घटकांना खोली (depth) आणि वास्तववादी स्वरूप देण्यासाठी अत्यंत महत्त्वाची आहे. हे साधन वापरकर्त्याला विविध गुणधर्म स्लाइडर्सच्या मदतीने बदलून सानुकूल बॉक्स-शॅडो तयार करण्याची सुविधा देते. यामध्ये एकाधिक सावलीच्या लेयर्स (layers) एकमेकांवर रचून गुंतागुंतीचे आणि वास्तववादी व्हिज्युअल इफेक्ट्स तयार करता येतात आणि तयार झालेला CSS कोड थेट कॉपी करून प्रकल्पात वापरता येतो.
हे साधन प्रामुख्याने खालील घटकांसाठी उपयुक्त ठरते:
- वेब घटकांसाठी अचूक
box-shadowडिझाइन करू इच्छिणारे डिझाइनर आणि डेव्हलपर्स. - अत्यंत सूक्ष्म आणि घट्ट (subtle and tight) सावली तयार करू इच्छिणारे वापरकर्ते.
- मऊ आणि विस्तीर्ण (soft and wider) सावलीची निर्मिती करणारे डिझाइनर.
- एखाद्या घटकाला आत दाबल्यासारखे (sunken input किंवा button) दाखवू इच्छिणारे डेव्हलपर्स.
- खोलीचा वास्तववादी आभास निर्माण करण्यासाठी एकाधिक सावलीच्या लेयर्स एकत्र करू इच्छिणारे व्यावसायिक.
इनपुट आणि आउटपुटचे नियंत्रण
या साधनामध्ये सावलीचे स्वरूप ठरवण्यासाठी खालील इनपुट नियंत्रणे दिली आहेत:
- आडवा ऑफसेट (Horizontal offset): सावलीला डावीकडे किंवा उजवीकडे हलवण्यासाठीचा स्लाइडर, ज्याची मर्यादा -50px ते 50px दरम्यान असते.
- उभा ऑफसेट (Vertical offset): सावलीला वर किंवा खाली हलवण्यासाठीचा स्लाइडर, ज्याची मर्यादा -50px ते 50px दरम्यान असते.
- ब्लर (Blur): सावलीच्या कडा मऊ करण्यासाठीचा स्लाइडर, ज्याची मर्यादा 0px ते 100px दरम्यान असते.
- स्प्रेड (Spread): ब्लर करण्यापूर्वी सावलीचा आकार वाढवण्यासाठी किंवा कमी करण्यासाठीचा स्लाइडर, ज्याची मर्यादा -50px ते 50px दरम्यान असते.
- सावलीचा रंग: सावलीचा रंग निवडण्यासाठीचा कलर पिकर.
- अपारदर्शकता (Opacity): सावलीची पारदर्शकता नियंत्रित करण्यासाठीचा स्लाइडर.
- इन्सेट (Inset) सावली: सावली घटकाच्या आतल्या बाजूला दाखवण्यासाठीचा टॉगल पर्याय.
- लेयर जोडा: अतिरिक्त सावलीची लेयर जोडण्यासाठीचे बटण.
- लेयर काढा: निवडलेली सावलीची लेयर काढून टाकण्यासाठीचे बटण.
साधनाच्या इंटरफेसवर प्रत्येक लेयरसाठी खालील आउटपुट मूल्ये आणि लेबल्स रिअल-टाइममध्ये अपडेट होतात:
- लेयर
- आडवा ऑफसेट (Horizontal offset)
- उभा ऑफसेट (Vertical offset)
- ब्लर (Blur)
- स्प्रेड (Spread)
- सावलीचा रंग
- अपारदर्शकता (Opacity)
- इन्सेट (Inset) सावली
- CSS: जनरेट झालेला अंतिम CSS कोड.
तांत्रिक नियम आणि मर्यादा
साधनाचे कार्य सुरळीत चालण्यासाठी आणि अचूक CSS मिळवण्यासाठी खालील तांत्रिक नियम लागू आहेत:
- रिअल-टाइम अपडेट्स: आडवा ऑफसेट (Horizontal offset)), उभा ऑफसेट (Vertical offset)), ब्लर (Blur)), आणि स्प्रेड (Spread)) या स्लाइडर्समधील कोणताही बदल CSS आउटपुटमध्ये त्वरित अपडेट केला जातो.
- मर्यादा श्रेणी:
- आडवा ऑफसेट: -50px ते 50px
- उभा ऑफसेट: -50px ते 50px
- ब्लर: 0px ते 100px
- स्प्रेड: -50px ते 50px
- डिफॉल्ट लेयर्स रचना: हे साधन सुरुवातीला पाच लेयर्स प्री-रेंडर करते. यातील पहिल्या लेयरची डिफॉल्ट मूल्ये
0 8 24 -4आणि १८% पारदर्शक काळा रंग (transparent black) अशी असतात, तर उर्वरित चार लेयर्स सुरुवातीला लपवलेल्या (hidden) असतात. - नवीन लेयर जोडणे: नवीन लेयर जोडल्यास ती डिफॉल्ट मूल्यांसह तयार होते.
- लेयर काढणे: लेयर काढून टाकल्यास निवडलेली विशिष्ट लेयर पूर्णपणे डिलीट होते.
- मल्टिपल लेयर्स CSS: जेव्हा एकापेक्षा जास्त लेयर्स सक्रिय असतात, तेव्हा CSS आउटपुटमध्ये त्या सर्व लेयर्स स्वल्पविरामाने (comma-separated values) विभक्त करून दाखवल्या जातात.
- ऋण स्प्रेड (Negative स्प्रेड (Spread)): स्प्रेडचे मूल्य उणे (-) केल्यास सावली घटकाच्या मूळ आकारापेक्षा आत खेचली जाते.
- इन्सेट सावली: 'Inset' पर्याय सक्रिय केल्यास सावली घटकाच्या बाहेरील बाज ऐवजी आतल्या बाजूला उलटवली जाते.
डेटा प्रक्रिया आणि गोपनीयता
या साधनामध्ये सुरक्षिततेला प्राधान्य दिले गेले आहे. प्रत्येक सावली तुमच्या ब्राउझरमध्ये रेंडर केली जाते. तुम्ही येथे सेट केलेले काहीही BroBroGo वर अपलोड केले जात नाही. सर्व प्रक्रिया स्थानिक पातळीवर (locally) वापरकर्त्याच्या ब्राउझरमध्येच पार पडते.
वारंवार विचारले जाणारे प्रश्न (FAQ)
ऑफसेट, ब्लर आणि स्प्रेड प्रत्यक्षात काय नियंत्रित करतात?
ऑफसेट (Offset) सावलीला डावीकडे/उजवीकडे आणि वर/खाली हलवते, ब्लर (blur) कडा मऊ करतो, आणि स्प्रेड (spread) ब्लर करण्यापूर्वी सावली वाढवतो किंवा कमी करतो. ऋण (negative) स्प्रेड सावलीला आत खेचतो, जे जवळची बारीक सावली दाखवण्यासाठी उपयुक्त ठरते.
इन्सेट (inset) पर्याय काय करतो?
सामान्य सावली एलिमेंटच्या बाहेर पडते, जसे की उंचावलेल्या कार्डच्या मागे प्रकाश असावा. 'Inset' सावलीला आतल्या बाजूला वळवते, ज्यामुळे एलिमेंट दाबल्यासारखे (sunken) दिसते — हे खोलगट इनपुट किंवा दाबलेल्या बटणांसाठी उपयुक्त ठरते.
एकापेक्षा जास्त सावलीच्या लेयर्स का वापराव्यात?
एकच सावली एका विशिष्ट आकाराच्या पलीकडे सपाट (flat) दिसते. वास्तववादी उंची (elevation) दाखवण्यासाठी सहसा एका गडद बारीक सावलीसोबत दुसरी मऊ, विस्तीर्ण सावली एकत्र केली जाते — तो प्रभाव मिळवण्यासाठी दुसरी लेयर जोडा आणि प्रत्येक लेयर स्वतंत्रपणे ट्यून करा.