CSS बॉक्स शैडो जनरेटर
मुफ्त ऑनलाइन CSS box-shadow जनरेटर। समायोज्य ऑफसेट, ब्लर, स्प्रेड, रंग और इनसेट के साथ विज़ुअली सुंदर छायाएं बनाएं। लाइव पूर्वावलोकन और तत्काल कोड कॉपी।
CSS box-shadow क्या है?
CSS box-shadow एक CSS संपत्ति है जो एक तत्व के फ्रेम के चारों ओर छाया प्रभाव जोड़ती है। यह आपको ऑफसेट, ब्लर त्रिज्या, स्प्रेड त्रिज्या और रंग मान निर्दिष्ट करके ड्रॉप शैडो, इनर शैडो और कई शैडो परतें बनाने की अनुमति देती है।
box-shadow के पैरामीटर क्या हैं?
box-shadow संपत्ति कई मानों को स्वीकार करती है: क्षैतिज ऑफसेट (X), लंबवत ऑफसेट (Y), ब्लर त्रिज्या, स्प्रेड त्रिज्या, रंग और वैकल्पिक inset कीवर्ड। आप अल्पविराम द्वारा अलग किए गए कई शैडो भी निर्दिष्ट कर सकते हैं।
inset कीवर्ड क्या है?
inset कीवर्ड शैडो को बाहरी शैडो (ड्रॉप शैडो) से आंतरिक शैडो में बदलता है। जब inset निर्दिष्ट किया जाता है, तो शैडो तत्व की सीमा के बाहर के बजाय अंदर खींची जाती है, जिससे इनसेट प्रभाव बनता है।
ब्लर त्रिज्या क्या है?
ब्लर त्रिज्या निर्धारित करती है कि शैडो का किनारा कितना धुंधला होता है। 0 का मान एक तेज, ठोस किनारा बनाता है। बड़े मान अधिक प्रसारित, नरम शैडो बनाते हैं जो तत्व से आगे तक फैलता है।
स्प्रेड त्रिज्या क्या है?
स्प्रेड त्रिज्या शैडो के आकार का विस्तार या संकुचन करती है। सकारात्मक मान शैडो को तत्व से बड़ा बनाते हैं, जबकि नकारात्मक मान इसे छोटा बनाते हैं। यह ब्लर लागू होने से पहले शैडो को प्रभावित करता है।
मैं कई शैडो कैसे बना सकता हूं?
आप प्रत्येक शैडो परिभाषा को अल्पविराम से अलग करके कई शैडो बना सकते हैं। प्रत्येक शैडो में अलग-अलग ऑफसेट, ब्लर, स्प्रेड और रंग मान हो सकते हैं। शैडो उस क्रम में लागू होते हैं जिसमें उन्हें घोषित किया जाता है, पहला शैडो शीर्ष पर होता है।
क्या मैं शैडो के लिए RGBA रंगों का उपयोग कर सकता हूं?
हां, आप किसी भी CSS रंग प्रारूप का उपयोग कर सकते हैं जिसमें RGBA, HSLA, HEX या नामित रंग शामिल हैं। RGBA और HSLA विशेष रूप से अर्ध-पारदर्शी शैडो बनाने के लिए उपयोगी हैं जो पृष्ठभूमि के साथ स्वाभाविक रूप से मिल जाते हैं।
मैं उत्पन्न CSS कोड कैसे कॉपी करूं?
बस जनरेटर इंटरफ़ेस में "कोड कॉपी करें" बटन पर क्लिक करें। CSS कोड आपके क्लिपबोर्ड पर कॉपी हो जाएगा और सीधे आपकी स्टाइलशीट या HTML फ़ाइल में पेस्ट किया जा सकता है।
क्या box-shadow सभी ब्राउज़रों में समर्थित है?
हां, box-shadow सभी आधुनिक ब्राउज़रों में समर्थित है जिसमें Chrome, Firefox, Safari, Edge और Opera शामिल हैं। यह 2011 से CSS3 का हिस्सा रहा है और इसकी उत्कृष्ट ब्राउज़र संगतता है।
क्या box-shadow प्रदर्शन को प्रभावित करता है?
box-shadow का आधुनिक ब्राउज़रों पर प्रदर्शन प्रभाव नगण्य होता है। हालांकि, कई तत्वों पर बड़े ब्लर त्रिज्या वाले कई जटिल शैडो का उपयोग करने से रेंडरिंग प्रदर्शन प्रभावित हो सकता है, विशेष रूप से मोबाइल उपकरणों पर।
box-shadow के सामान्य उपयोग मामले क्या हैं?
सामान्य उपयोगों में कार्ड एलिवेशन प्रभाव बनाना, बटन में गहराई जोड़ना, इनसेट फॉर्म फ़ील्ड बनाना, मटेरियल डिज़ाइन शैडो लागू करना और ओवरलैपिंग तत्वों के बीच दृश्य पृथक्करण जोड़ना शामिल है।
क्या मैं box-shadow को एनिमेट कर सकता हूं?
हां, box-shadow को CSS ट्रांज़िशन या एनिमेशन का उपयोग करके एनिमेट किया जा सकता है। हालांकि, box-shadow को एनिमेट करना प्रदर्शन-गहन हो सकता है। बेहतर प्रदर्शन के लिए, इसके बजाय ओपैसिटी ट्रांज़िशन के साथ छद्म-तत्वों का उपयोग करने पर विचार करें।