सीएसएस में box-shadow संपत्ति डेवलपर्स के लिए HTML तत्वों में गहराई और आयाम पेश करने के लिए एक प्रभावी तंत्र के रूप में कार्य करती है। तत्वों में छाया को शामिल करके, उपयोगकर्ता इंटरफ़ेस के यथार्थवाद और दृश्य आकर्षण को बढ़ाया जा सकता है। यह लेख box-shadow के मूल सिद्धांतों पर प्रकाश डालेगा और इसके अनुप्रयोग में महारत हासिल करने में आपकी सहायता के लिए उदाहरण पेश करेगा।

बुनियादी बातें समझना

box-shadow प्रॉपर्टी में कई मान होते हैं जो परिभाषित करते हैं कि छाया कैसी दिखाई देगी। यहां मूल वाक्यविन्यास है:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: यह पैरामीटर छाया के क्षैतिज विस्थापन को परिभाषित करता है। सकारात्मक मान छाया को दाईं ओर स्थानांतरित करते हैं, नकारात्मक मान इसे बाईं ओर स्थानांतरित करते हैं।
• offset-y: यह पैरामीटर छाया के ऊर्ध्वाधर विस्थापन को इंगित करता है। सकारात्मक मूल्य छाया को नीचे की ओर ले जाते हैं, नकारात्मक मूल्य उसे ऊपर उठाते हैं।
• धुंधला-त्रिज्या (वैकल्पिक): यह सेटिंग छाया की कोमलता को नियंत्रित करती है। उच्च मान के परिणामस्वरूप छाया अधिक विसरित होती है। यदि यह पैरामीटर निर्दिष्ट नहीं है, तो डिफ़ॉल्ट मान 0 है, जो एक अलग छाया उत्पन्न करता है।
• प्रसार-त्रिज्या (वैकल्पिक): यह पैरामीटर छाया के आयामों को प्रभावित करता है। सकारात्मक मान छाया के आकार को बढ़ाते हैं, नकारात्मक मान इसे कम करते हैं।
• रंग: यह विशेषता छाया के रंग को परिभाषित करती है। यह कोई भी वैध सीएसएस रंग प्रतिनिधित्व हो सकता है, जैसे #000, आरजीबीए(0,0,0,0.5) या एचएसएल(0, 0%, 50%)।

उदाहरण: बेसिक बॉक्स छाया

आइए एक बटन पर लागू बॉक्स-छाया का एक सरल उदाहरण देखें:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

इस मामले में, छाया क्षैतिज और लंबवत रूप से 5px द्वारा ऑफसेट है, इसका धुंधला त्रिज्या 10px है, और 0.3 के साथ काले रंग से रंगा हुआ है अपारदर्शिता.

उदाहरण: इनसेट छाया

box-shadow inset कीवर्ड का भी समर्थन करता है, जो छाया को तत्व के अंदर रखता है, इसे एक रिक्त प्रभाव देता है।

div { बॉक्स-छाया: इनसेट 0 0 10px #000; }

div {
  box-shadow: inset 0 0 10px #000;
}

यहां, छाया को

div के अंदर रखा गया है, जिससे ऐसा प्रभाव पैदा होता है मानो सामग्री को अंदर की ओर धकेला गया हो।

उन्नत युक्तियाँ

आपके पास प्रत्येक
• box-shadow विनिर्देश को अल्पविराम से चित्रित करके कई छायाएं बनाने की क्षमता है। यह तकनीक जटिल, स्तरित छाया प्रभाव बनाने की अनुमति देती है।

बॉक्स-छाया: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

div {
  box-shadow: inset 0 0 10px #000;
}

बटन या कार्ड की अन्तरक्रियाशीलता को बढ़ाने, होवर इंटरैक्शन उत्पन्न करने के लिए छाया प्रभावों का अक्सर उपयोग किया जाता है।

बटन: होवर { बॉक्स-छाया: 5px 10px 20px rgba(0, 0, 0, 0.4); }

div {
  box-shadow: inset 0 0 10px #000;
}

उन लोगों के लिए जो अधिक दृश्य दृष्टिकोण पसंद करते हैं, बॉक्स-शैडो सीएसएस जेनरेटर देखें। यह टूल आपको बिना कोई कोड लिखे और प्रीसेट सहेजे बिना, सहजता से कस्टम बॉक्स-छाया प्रभाव तैयार करने की अनुमति देता है।