CSS Box Shadow जनरेटर
CSS Box Shadow म्हणजे काय?
CSS box-shadow गुणधर्म एखाद्या घटकाच्या फ्रेमभोवती सावली प्रभाव जोडतो. सावल्या ऑफसेट, धूसर, पसरवता, रंगवता आणि inset (आंतरिक सावली) म्हणून सेट करता येतात. अल्पविरामाने विभक्त केलेल्या अनेक सावल्या समृद्ध प्रभावांसाठी स्तरबद्ध करता येतात. हा जनरेटर तुम्हाला जटिल बहु-स्तरीय सावल्या दृश्यमानपणे तयार करण्यास आणि क्लिपबोर्डवर पेस्ट करण्यासाठी तयार CSS कॉपी करण्यास परवानगी देतो.
Box Shadow जनरेटर कसा वापरायचा
-
सावली स्थापित करण्यासाठी आणि आकार देण्यासाठी Offset X/Y, Blur आणि Spread स्लाइडर समायोजित करा.
-
सावलीचा रंग निवडण्यासाठी रंग स्वॉचवर क्लिक करा आणि पारदर्शितेसाठी Opacity स्लाइडर वापरा.
-
आंतरिक तेज किंवा दाबलेला प्रभाव तयार करण्यासाठी 'Inset' टॉगल करा.
-
अनेक सावल्या एकावर एक ठेवण्यासाठी '+ स्तर जोडा' क्लिक करा.
-
तयार केलेला CSS कॉपी करा आणि तुमच्या स्टाइलशीटमध्ये पेस्ट करा.
वारंवार विचारलेले प्रश्न
box-shadow आणि drop-shadow filter मध्ये काय फरक आहे? box-shadow घटकाच्या आयताकृती सीमा बॉक्सभोवती सावलीजोडतो आणि inset shadows समर्थन करतो. CSS filter: drop-shadow() घटकाच्या दृश्य आकाराला लागू होतो (पारदर्शकता समावेशित), ज्यामुळे ते पारदर्शक पार्श्वभूमीसह PNGs सारख्या गैर-आयताकृती रूपरेषांचे अनुसरण करते.
मी Material Design कार्ड एलिव्हेशन इफेक्ट कसे तयार करू? दोन box shadows स्टॅक करा: एक नरम ambient shadow (मोठा blur, कमी opacity, थोडा spread) आणि एक key shadow (लहान blur, अधिक opacity, दिशात्मक offset). उदाहरणार्थ: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
box-shadow पृष्ठ लेआउट प्रभावित करते का? नाही. box-shadow घटकाचा आकार किंवा दस्तऐवज प्रवाहातील स्थिती प्रभावित करत नाही. outline च्या विपरीत, ते लेआउट जागा घेत नाही आणि इतर घटकांना हलवणार नाही.
मी box-shadow ला animate करू शकतो का? होय. box-shadow CSS transitions आणि animations सह animate करण्यायोग्य आहे. कार्यक्षमतेसाठी, केवळ आवश्यक असताना box-shadow संक्रमण करा — ब्राउজर box-shadow बदलांना transform किंवा opacity जितक्या कुशलतेने GPU-accelerate करू शकत नाही.
Keywords: CSS box shadow जनरेटर, box-shadow CSS, CSS सावली साधन, CSS drop shadow, inset shadow, बहु-स्तरीय सावली, CSS shadow ऑनलाइन