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

छाया जोड़ने के लिए, बॉक्स-छाया गुण का उपयोग करें, जिसमें छह मान हैं, जिनमें से केवल दो की आवश्यकता है। चित्र में. चित्र 1 बॉक्स-शैडो प्रॉपर्टी को सभी संभावित मानों के साथ दिखाता है, उन्हें पहचानने के लिए क्रमांकित किया गया है।

चावल। 1. बॉक्स-छाया संपत्ति मूल्य

1. कीवर्डइनसेट तत्व के अंदर छाया सेट करता है;
2. छाया को क्षैतिज रूप से स्थानांतरित करें (5px - दाएँ, -5px - बाएँ);
3. ऊर्ध्वाधर बदलाव (5px - नीचे, -5px - ऊपर);
4. छाया धुंधला त्रिज्या (0 - तेज छाया);
5. छाया खिंचाव (5px - खिंचाव, -5px - सिकुड़न);
6. छाया रंग.

केवल क्षैतिज और ऊर्ध्वाधर बदलाव निर्दिष्ट करना आवश्यक है, अन्य सभी पैरामीटर डिफ़ॉल्ट रूप से लिए जाएंगे; इस मामले में, छाया धुंधली या काली हुए बिना तेज होगी।

विभिन्न मापदंडों और उनके मूल्यों को मिलाकर, आप विभिन्न प्रकार की छायाएँ प्राप्त कर सकते हैं। तालिका में 1 कोड और उससे प्राप्त होने वाले परिणाम को दर्शाता है।

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

उदाहरण 1: पृष्ठभूमि चित्र पर छाया

HTML5 CSS3 IE 9+ Cr Op Sa Fx

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 2. छाया ब्लॉक के कोनों की गोलाई का अनुसरण करती है।

चावल। 2. पृष्ठभूमि चित्र पर छाया का प्रकट होना

"विस्तृत" छाया जोड़ते समय, ध्यान रखें कि यह ब्राउज़र विंडो की दृश्यमान सीमाओं से परे विस्तारित हो सकती है और इस प्रकार एक क्षैतिज स्क्रॉलबार दिखाई दे सकती है।

छाया को छद्म तत्वों में भी जोड़ा जा सकता है, यह कभी-कभी जटिल लेआउट के लिए आवश्यक होता है। चित्र में. चित्र 3 एक हेडर ब्लॉक दिखाता है जिसमें एक छाया जोड़ी गई है। जंक्शन पर किसी भी लाइन से बचने के लिए, आपको ::after छद्म तत्व का उपयोग करना होगा और इसमें एक छाया जोड़ना होगा।

चावल। 3. छाया से ब्लॉक करें

उदाहरण 2 ऐसे ब्लॉक का निर्माण दिखाता है।

उदाहरण 2. छाया से ब्लॉक करें

HTML5 CSS3 IE 9+ Cr Op Sa Fx

एक तत्व में एक से अधिक छायाएं हो सकती हैं, लेकिन एक साथ कई छायाएं हो सकती हैं; उनके पैरामीटर बॉक्स-छाया संपत्ति के मूल्य में अल्पविराम से अलग सूचीबद्ध होते हैं। उदाहरण 3 दिखाता है कि सभी छवियों में दोहरी छाया कैसे जोड़ें।

उदाहरण 2. छाया से ब्लॉक करें

HTML5 CSS3 IE 9+ Cr Op Sa Fx

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 4.

चावल। 4. दोहरी छाया छवि

पहली छाया छवि के बाईं ओर 20px के धुंधले त्रिज्या के साथ प्रदर्शित होती है, इसका आकार चौथे पैरामीटर (-20px) से कम हो जाता है। दूसरी छाया के मापदंडों को दशमलव बिंदु के बाद दर्शाया जाता है; छाया को चित्र के दाईं ओर प्रदर्शित किया जाता है और समरूपता के लिए इसे छोटा भी किया जाता है।

नमस्कार प्रिय पाठकों. आज हम आपके साथ करेंगे जब ब्लॉकों के लिए सुंदर छाया सीएसएस सहायता . मुझे लगता है कि यह आपके लिए बहुत उपयोगी होगा, खासकर यदि आप टेम्पलेट बनाते हैं। और छाया वाले ब्लॉक बहुत आकर्षक और आधुनिक दिखते हैं।

ब्राउज़र समर्थन

मूलतः सभी आधुनिक ब्राउज़र छाया प्रभावों का समर्थन करते हैं:

• इंटरनेट एक्सप्लोरर 9.0 और उच्चतर;
• फ़ायरफ़ॉक्स 3.5 और उच्चतर;
• क्रोम 1 और उच्चतर;
• सफ़ारी 3 और ऊपर;
• ओपेरा 10.5 और उच्चतर।

मैं एक महत्वपूर्ण बिंदु का भी उल्लेख करना चाहूंगा: कुछ ब्राउज़रों के लिए हम कुछ उपसर्गों का उपयोग करेंगे। फ़ायरफ़ॉक्स के लिए उपयोग किया जाता है -मोज़-, क्रोम और सफारी के लिए आपको उपसर्ग का उपयोग करना होगा -वेबकिट.

खैर, अब सबसे दिलचस्प हिस्से पर चलते हैं। आइए सभी छायाओं को अलग-अलग देखें, 8 प्रभाव होंगे।

छाया प्रभाव 1

इस उदाहरण में, ब्लॉक की छाया सबसे नीचे है।

एचटीएमएल

सीएसएस

छाया प्रभाव 2

इस उदाहरण में, ब्लॉक से छाया बाएँ और दाएँ जाती है, लेकिन बीच में कोई नहीं है। यह एक बहुत ही दिलचस्प प्रभाव साबित होता है.

एचटीएमएल

सीएसएस

छाया प्रभाव 3

यहां ब्लॉक से छाया केवल बाईं ओर है।

एचटीएमएल

सीएसएस

छाया प्रभाव 4

दाहिनी ओर छाया.

एचटीएमएल

सीएसएस

छाया प्रभाव 5

इस मामले में, दोनों तरफ की छाया अधिक मजबूती से नीचे की ओर चली गई है।

एचटीएमएल

सीएसएस

छाया प्रभाव 6

यहां ब्लॉक के निचले भाग पर घुमावदार छाया का प्रभाव है।

एचटीएमएल

सीएसएस

छाया प्रभाव 7

वही प्रभाव ब्लॉक के नीचे और ऊपर की छाया मात्र है।

एचटीएमएल

सीएसएस

छाया प्रभाव 8

ब्लॉक के किनारों पर घुमावदार छाया का प्रभाव.

एचटीएमएल

सीएसएस

बस इतना ही, प्यारे दोस्तों! यदि आपको कुछ भी समझ में न आये तो कमेन्ट में अवश्य पूछें। जल्द ही फिर मिलेंगे।

मानक के आगमन के साथ सीएसएस 3बॉक्स-शैडो प्रॉपर्टी पेश की, जो वेब डेवलपर्स के बीच व्यापक रूप से उपयोग की जाती है, क्योंकि यह वांछित दृश्य प्रभाव देने के लिए किसी तत्व के बॉक्स में एक या अधिक छाया जोड़ना आसान बनाता है।

पिछले लेख में, हमने बॉर्डर-त्रिज्या संपत्ति को देखा, इसका उपयोग करके, आप छाया प्राप्त कर सकते हैं गोल कोनें. टेक्स्ट शैडो (टेक्स्ट-शैडो) के अनुरूप, आप कई शैडो बना सकते हैं, उन्हें उसी के अनुसार लागू किया जाता है z- अक्षआगे से पीछे (शीर्ष पर पहली दी गई छाया के साथ)।

आइए इस आधुनिक संपत्ति के सिंटैक्स पर करीब से नज़र डालें:

आइए इस संपत्ति के संभावित मूल्यों पर क्रम से विचार करें:

तत्वों के लिए छाया बनाने के लिए आपको जिन मुख्य बिंदुओं को समझने की आवश्यकता है वे हैं:

मैं आपका ध्यान इस तथ्य की ओर आकर्षित करना चाहूंगा कि बॉक्स-शैडो संपत्ति वर्तमान में सभी आधुनिक ब्राउज़रों द्वारा समर्थित है:

यदि आप मोबाइल सहित कुछ ब्राउज़रों के लिए समर्थन का विस्तार करना चाहते हैं आईओएस 3.2 - 4.3और एंड्रॉइड 2.1-3, तो निर्माता उपसर्गों का उपयोग करने और निम्नलिखित सिंटैक्स का उपयोग करने की अनुशंसा की जाती है (लेख में उदाहरणों में, सिंटैक्स का उपयोग केवल आधुनिक ब्राउज़रों के लिए किया जाएगा):

आइए अभ्यास की ओर आगे बढ़ें और शुरुआत करें सरल उदाहरण, जिसमें हम तत्वों में एक छाया जोड़ते हैं:

हमारे उदाहरण का परिणाम:

एकाधिक छायाओं का उपयोग करना

निम्नलिखित उदाहरण में, मैं दिलचस्प रंग मिश्रण प्रभाव पर विचार करने का प्रस्ताव करता हूं जिसे कई छायाओं का उपयोग करके प्राप्त किया जा सकता है:

• दोनिश्चित चौड़ाई और ऊंचाई (15ईएम और 10ईएम) के ब्लॉक, सभी तरफ (2ईएम) पैडिंग जोड़ें और ब्लॉकों को ब्लॉक-लाइन पर सेट करें ताकि वे पंक्तिबद्ध हो सकें।
• के लिए पहलाक्लास के साथ ब्लॉक करें ।परीक्षाहमने संकेत दिया चारविभिन्न क्षैतिज और ऊर्ध्वाधर छाया मूल्यों के साथ छाया ताकि तत्व की सभी तरफ अलग-अलग छाया हो। सभी छायाओं के लिए धुंधला त्रिज्या समान पर सेट किया गया था। प्रत्येक छाया का रंग अलग-अलग होता है और पूर्वनिर्धारित रंगों का उपयोग करके निर्दिष्ट किया जाता है।
• के लिए दूसराक्लास के साथ ब्लॉक करें .परीक्षण2हमने संकेत दिया चारविभिन्न क्षैतिज और ऊर्ध्वाधर छाया मानों वाली छायाएँ। सभी छायाओं के लिए धुंधला त्रिज्या समान पर सेट किया गया था, जबकि छाया खिंचाव नकारात्मक पर सेट किया गया था, जिससे छाया में ही कमी आ गई। प्रत्येक छाया का रंग अलग-अलग होता है और RGBA प्रणाली का उपयोग करके निर्दिष्ट किया जाता है।

हमारे उदाहरण का परिणाम:

छवियों के लिए छाया का उपयोग करना

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

हम पाठ्यपुस्तक लेख "" में पृष्ठभूमि छवियों के साथ काम करने पर विस्तार से विचार करेंगे, और अब, छाया के उपयोग के अध्ययन को समाप्त करने के लिए, हम इसे सतही रूप से स्पर्श करेंगे और छवि को निम्नलिखित में एक तत्व की पृष्ठभूमि के रूप में उपयोग करेंगे। उदाहरण:

• दोनिश्चित चौड़ाई और ऊंचाई (237px और 232px) के ब्लॉक, सभी पक्षों (2em) के लिए मार्जिन जोड़े और उन्हें पंक्तिबद्ध करने में सक्षम होने के लिए ब्लॉक को ब्लॉक-लाइन पर सेट किया। हमने छवि के आकार के लिए ब्लॉक आकार 237px x 232px निर्धारित किया है, ताकि प्रशिक्षण के इस चरण में हमें तत्व को फिट करने और उन्हें प्रभावित करने के लिए छवि को स्केल न करना पड़े। सीएसएस गुण, जिन्हें बाद के चरण में अध्ययन के लिए योजनाबद्ध किया गया है (पाठ्यपुस्तक लेख "") में।
• के लिए पहलाक्लास के साथ ब्लॉक करें ।परीक्षाहमने क्षैतिज और ऊर्ध्वाधर छाया के लिए शून्य मान निर्दिष्ट किया है, लेकिन साथ ही हमने 50px का धुंधला त्रिज्या निर्दिष्ट किया है और 10px का खिंचाव त्रिज्या सेट करके इसका विस्तार किया है। छाया का रंग पूर्वनिर्धारित रंग (बैंगनी) से दर्शाया गया था। इसके अलावा, हमने घोषणा में इनसेट कीवर्ड निर्दिष्ट किया, जिससे छाया तत्व के अंदर गिरती है। दूसरे शब्दों में, हमने तत्व की एक आंतरिक छाया बनाई है।
• के लिए दूसराक्लास के साथ ब्लॉक करें .परीक्षण2हमने क्षैतिज और ऊर्ध्वाधर छाया के लिए शून्य मान निर्दिष्ट किया है, लेकिन साथ ही हमने 50px का धुंधला त्रिज्या निर्दिष्ट किया है और 10px का खिंचाव त्रिज्या सेट करके इसका विस्तार किया है। छाया का रंग RGBA मोड में निर्दिष्ट है।

हमारे उदाहरण का परिणाम:

चावल। 98 सीएसएस में छवियों के लिए छाया का उपयोग करने का उदाहरण (बॉक्स-छाया संपत्ति)

विषय पर प्रश्न और कार्य

अगले विषय पर जाने से पहले, अभ्यास कार्य पूरा करें:

यदि आपको अभ्यास कार्य पूरा करने में कठिनाई हो रही है, तो आप हमेशा एक अलग विंडो में उदाहरण खोल सकते हैं और यह समझने के लिए पृष्ठ का निरीक्षण कर सकते हैं कि किस सीएसएस कोड का उपयोग किया गया था।

2016-2020 डेनिस बोल्शकोव, आप साइट के काम के संबंध में टिप्पणियाँ और सुझाव [email protected] पर भेज सकते हैं

ब्लॉक शैडो एक उत्कृष्ट त्रि-आयामी प्रभाव है जो वेबसाइट ब्लॉक को यथार्थता और वॉल्यूम देता है। जब मैंने अध्ययन करना शुरू किया (लगभग 5-6 साल पहले), मुझे अस्तित्व के बारे में कोई जानकारी नहीं थी, और एक साइट बनाते समय मुझे ब्लॉकों की छाया को एक छवि बनाना पड़ा। यह बहुत असुविधाजनक था, और यह हमेशा उस तरह से काम नहीं करता था जैसा मैं चाहता था। CSS की शक्ति को धन्यवाद, जिसने वेब डिज़ाइनरों का काम आसान बना दिया है। आज मैं आपको दिखाऊंगा कि सीएसएस में ब्लॉक के लिए छाया कैसे बनाई जाती है।

CSS में छाया जोड़ने के लिए, प्रॉपर्टी का उपयोग करें डब्बे की छाया .

1. छाया को क्षैतिज रूप से स्थानांतरित करें (दाईं ओर 100px तक, बाईं ओर -100px तक);
2. ऊर्ध्वाधर बदलाव (100px तक नीचे, -100px तक ऊपर);
3. छाया धुंधली (0 - स्पष्ट छाया, 100 - बहुत धुंधली छाया);
4. छाया को खींचना (100px तक - खींचना, -100px तक - संपीड़न);
5. छाया रंग;
6. इनसेट - छाया तत्व के अंदर है, इनसेट के बिना छाया बाहर की ओर होगी।

परिणाम :

छाया के साथ तालिका:

कोड	उदाहरण:
बॉक्स-छाया: 0px 13px 17px -6px #000000;
बॉक्स-छाया: 10px -10px 0px -6px #000000;
बॉक्स-छाया: 10px 13px 0px -6px #000000;
बॉक्स-छाया: 1px 1px 32px -6px #000000;
बॉक्स-छाया: -1px 23px 41px -25px #000000;
बॉक्स-छाया: -1px 23px 41px -25px #4dc13c;
बॉक्स-छाया: -10px -10px 40px -6px #000000 इनसेट;
बॉक्स-छाया: 7px 10px 23px -8px #92a9e7;

छाया का उपयोग करके आप एक त्रि-आयामी ब्लॉक बना सकते हैं:

कोड	उदाहरण
बॉक्स-छाया: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215, 190, 30), 6px 6px RGB (187,162,2), 7px 6px RGB (214,189,29), 7px 7px RGB (186,161,1), 8px 7px RGB (213,188,28), 8PX 8PX RGB (185,28), 8px 8px RGB (185,28) आरजीबी(212,187,27), 9पीएक्स 9पीएक्स आरजीबी(184,159,0);
बॉक्स-छाया: -1px 0px आरजीबी(220,195,35), -1px 1px आरजीबी(192,167,7), -2px 1px आरजीबी(219,194,34), -2px 2px आरजीबी(191,166,6), -3px 2px आरजीबी(218,193 ,33), -3पीएक्स 3पीएक्स आरजीबी(190,165,5), -4पीएक्स 3पीएक्स आरजीबी(217,192,32), -4पीएक्स 4पीएक्स आरजीबी(189,164,4), -5पीएक्स 4पीएक्स आरजीबी(216,191,31), -5पीएक्स 5पीएक्स आरजीबी(188,163) ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188 ,28), -8पीएक्स 8पीएक्स आरजीबी(185,160,0), -9पीएक्स 8पीएक्स आरजीबी(212,187,27), -9पीएक्स 9पीएक्स आरजीबी(184,159,0);
बॉक्स-छाया: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px आरजीबी(218,193,33), -3px -3px आरजीबी(190,165,5), -4px -3px आरजीबी(217,192,32), -4px -4px आरजीबी(189,164,4), -5px -4px आरजीबी(216,191, 31), -5पीएक्स -5पीएक्स आरजीबी(188,163,3), -6पीएक्स -5पीएक्स आरजीबी(215,190,30), -6पीएक्स -6पीएक्स आरजीबी(187,162,2), -7पीएक्स -6पीएक्स आरजीबी(214,189,29), -7पीएक्स - 7px आरजीबी(186,161,1), -8px -7px आरजीबी(213,188,28), -8px -8px आरजीबी(185,160,0), -9px -8px आरजीबी(212,187,27), -9px -9px आरजीबी(184,159,0 );
बॉक्स-छाया: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193 ,33), 3पीएक्स -3पीएक्स आरजीबी(190,165,5), 4पीएक्स -3पीएक्स आरजीबी(217,192,32), 4पीएक्स -4पीएक्स आरजीबी(189,164,4), 5पीएक्स -4पीएक्स आरजीबी(216,191,31), 5पीएक्स -5पीएक्स आरजीबी(188,163) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188 ,28), 8पीएक्स -8पीएक्स आरजीबी(185,160,0), 9पीएक्स -8पीएक्स आरजीबी(212,187,27), 9पीएक्स -9पीएक्स आरजीबी(184,159,0);

ब्लॉक1 (चौड़ाई: 70%; अधिकतम-चौड़ाई: 550px; मार्जिन: 10px ऑटो; पैडिंग: 1em; बॉक्स-छाया: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) इनसेट;

परिणाम :

ब्लॉक1 (चौड़ाई: 30%; अधिकतम-चौड़ाई: 550px; मार्जिन: 2em ऑटो; पैडिंग: 1em; पृष्ठभूमि: #DADADA; बॉक्स-छाया: 6px 6px #BBBBBB, 12px 12px #919191;)

परिणाम :

ब्लॉक1 (चौड़ाई: 30%; मार्जिन: 0 ऑटो; पैडिंग: 2em; बॉक्स-शैडो: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399 )

परिणाम :

छाया का उपयोग करके आप एक सुंदर फ्रेम बना सकते हैं।

गुणों का उपयोग कर सुंदर फ़्रेमडिब्बा- छाया

ब्लॉक1 (चौड़ाई: 20%; अधिकतम-चौड़ाई: 250px; मार्जिन: 0 ऑटो; पैडिंग: 1em; बॉर्डर: 2px धराशायी #999; बॉक्स-छाया: 0 0 0 1px #999, इनसेट 0 0 0 1px #999;)
परिणाम
:

ब्लॉक1 (चौड़ाई: 30%; अधिकतम-चौड़ाई: 250px; मार्जिन: 2em ऑटो; पैडिंग: 4em; पृष्ठभूमि: #dcc005; बॉक्स-छाया: 0 0 4em 4em #fff इनसेट;)
परिणाम
:

ब्लॉक1 (अधिकतम-चौड़ाई: 250px; मार्जिन: 0 ऑटो; पैडिंग: 1em; बॉर्डर-त्रिज्या: 10px; पृष्ठभूमि: आरजीबी(100,100,100) रेडियल-ग्रेडिएंट(0 0 पर वृत्त, आरजीबीए(255,255,255,.65), आरजीबीए(255,255,255, .35)); बॉक्स-छाया: इनसेट आरजीबीए(0,0,0,.5) -3पीएक्स -3पीएक्स 8पीएक्स, इनसेट आरजीबीए(255,255,255,.9) 3पीएक्स 3पीएक्स 8पीएक्स, आरजीबीए(0,0,0,.8) 3px 3px 8px -3px )
परिणाम
:


 
 
 
 
 
 
 

 

 
वेबसाइट
 

 







परिणाम
:

ये खूबसूरत प्रभाव सीएसएस में छाया का उपयोग करके प्राप्त किए जा सकते हैं।  कुछ नया और मौलिक लेकर आएं, सब कुछ आपके हाथ में है।  आपके पास ज्ञान और क्षमताएं हैं. 
और इनमें से एक दिन मैं एक लेख प्रकाशित करूंगा कि आप फ़ोटोशॉप का उपयोग किए बिना कैसे बना सकते हैं।  इसलिए, चीजों के केंद्र में रहें और मेरे ब्लॉग अपडेट की सदस्यता लें।  जिस विषय में आपकी रुचि हो उसे न चूकें।  ख़ैर, बस इतना ही, शुभकामनाएँ!!!
स्पष्टीकरण:
, - छाया बनाने के लिए सीएसएस भाषा गुणों का उपयोग किया जाता है।
, , - छाया संपत्ति पैरामीटर।
, , , - सीएसएस गुण, तत्वों के आकार और स्थान को बदलने के लिए जिम्मेदार।
— टैग, लिंक बनाने के लिए जिम्मेदार।

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

सीएसएस हमें कल्पना और प्रयोग के लिए इतनी जगह प्रदान करता है कि उन सभी को आज़माने में आपको कई साल लग जाएंगे।
इस लेख में, हम CSS में छायाएँ बनाने के बारे में विस्तार से जानेंगे।  नियमित बाहरी छायाओं के अलावा, हम आपको दिखाएंगे कि आंतरिक और राज्य छाया कैसे बनाएं।
सीएसएस - बॉक्स छाया.  बॉक्स-छाया संपत्ति

html(पृष्ठभूमि: #fff;) शरीर(चौड़ाई: 80%; मार्जिन: 0 ऑटो; पृष्ठभूमि-रंग: rgba(150,60,60,0.54) बॉक्स-छाया: -1px 5px 5px 5px rgba(77,63,63) ,0.88) ) 
उपकरण हमें किसी ब्लॉक के चारों ओर किसी भी रंग के साथ एक या अधिक छाया बनाने की अनुमति देता है।
मूलतः, छाया क्या है?  यह तत्व के क्षेत्र की एक सटीक प्रतिलिपि है, जिसका एक विशिष्ट रंग और स्थान है।  इन पैरामीटर्स को बॉक्स-शैडो प्रॉपर्टी का उपयोग करके सेट किया जा सकता है।
छाया गुणों का उपयोग इस क्रम में किया जाता है:
क्षैतिज रूप से ले जाएँ.
लंबवत ले जाएँ.
अस्पष्टता का स्तर.
खिंचाव।
छाया रंग.
यह वह क्रम है जिसमें छाया पैरामीटर निर्दिष्ट किए जाने चाहिए।  मुख्य बात यह है कि मूल्य को भ्रमित न करें, क्योंकि पहले 4 को संख्यात्मक मानों का उपयोग करके उसी तरह सेट किया गया है - , , और इसी तरह।

पहला पैरामीटर, जिसे कहा जाता है - छाया को ब्लॉक के सापेक्ष क्षैतिज रूप से स्थानांतरित करता है।  नकारात्मक सहित किसी भी मान को स्वीकार करता है।
नकारात्मक मान छाया को बाईं ओर स्थानांतरित करते हैं, और सकारात्मक मान छाया को दाईं ओर स्थानांतरित करते हैं।  ऊर्ध्वाधर अक्ष के साथ छाया धुंधली होने पर पैरामीटर मान 0 के बराबर हो सकता है।
क्रम में अगला है संपत्ति .  छाया को लंबवत स्थानांतरित करने के लिए जिम्मेदार।  यह किसी भी मूल्य को भी स्वीकार करता है - सकारात्मक और नकारात्मक।  नकारात्मक मान छाया को ऊपर ले जाते हैं, और सकारात्मक मान छाया को नीचे ले जाते हैं।
इस पैरामीटर को 0 पर सेट किया जा सकता है। आमतौर पर क्षैतिज छाया धुंधलापन के लिए उपयोग किया जाता है।
ध्यान!  हम पिक्सेल में मान निर्दिष्ट करने की अनुशंसा करते हैं.  आप अन्य मानों का उपयोग कर सकते हैं - , , % और अन्य, लेकिन यह अनुशंसित नहीं है।  छाया बनाने के लिए ये सभी मूल्य काफी बड़े हैं।  उन्हें निर्दिष्ट करके, आप आकारों से आगे बढ़ सकते हैं।

3 मान - या धुंधला.  इस मान को दर्ज करना आवश्यक नहीं है; इसे निर्दिष्ट किए बिना, छायाएँ अभी भी काम करेंगी।
निर्दिष्ट मान उस त्रिज्या को निर्धारित करता है जिसके साथ छाया धुंधली होगी।  नकारात्मक मान इंगित नहीं किए गए हैं.
यहां बड़े मूल्यों का भी उपयोग किया जा सकता है।  एक मजबूत धुंधलापन रंगीन प्रभाव पैदा करने में मदद करेगा, लेकिन केवल कुछ स्थितियों में।
अंतिम मूल्य, जो छाया को फैलाने के लिए जिम्मेदार है।  यह भी वैकल्पिक है, लेकिन आपकी छाया में कुछ रंग जोड़ सकता है।
विस्तार छाया के केंद्रीय ठोस भाग के खिंचाव के कारण होता है, जो धुंधले किनारों के बीच स्थित होता है।
यह पैरामीटर सकारात्मक और नकारात्मक दोनों, किसी भी मान को स्वीकार कर सकता है।  सकारात्मक मूल्य छाया को फैलाते हैं, जबकि नकारात्मक मूल्य इसे सिकोड़ते हैं।
और अंतिम पैरामीटर - .  इसे निर्दिष्ट करना भी आवश्यक नहीं है, क्योंकि डिफ़ॉल्ट रूप से बॉक्स छाया का अपना रंग होता है - काला।
रंग बदलने के लिए, कोई भी रंग प्रणाली उपयुक्त है - साथ ही मानक रंग भी।
ध्यान!  यदि आप चाहते हैं कि संपत्ति सफारी में काम करे, तो यह पैरामीटर निर्दिष्ट किया जाना चाहिए, भले ही आप मानक काले रंग का उपयोग करें।
आंतरिक छाया - सीएसएस

html(पृष्ठभूमि: #fff;) शरीर(चौड़ाई: 80%; मार्जिन: 0 ऑटो; पृष्ठभूमि-रंग: rgba(150,60,60,0.54) बॉक्स-छाया: -1px 5px 5px 5px rgba(77,63,63) ,0.88) इनसेट ) 
तो आइए छाया के उपयोग का पहला उदाहरण देखें।  यहां हम बॉडी ब्लॉक के लिए एक आंतरिक छाया बनाने पर गौर करेंगे।
आरंभ करने के लिए, हमारा खोलें HTML दस्तावेज़और इसे भरें.  आपको कोई टैग निर्दिष्ट करने की ज़रूरत नहीं है, सामग्री नहीं भरनी है, मुख्य बात एक टैग बनाना है .
हमारा सीएसएस दस्तावेज़ खोलें और टैग लिखें , यह हमारा मुख्य चयनकर्ता होगा।
आगे हम खोलते हैं ब्रेसिज़और संपत्ति लिखो .  स्थान सेट करें, धुंधला करें, फैलाएँ।  आप पहले से ही जानते हैं कि इन मानों को कैसे सेट किया जाए।  उसके बाद, हमने छाया का रंग सेट किया, हमने इसे सफेद बनाया, लेकिन आप इसे अपनी पसंद के अनुसार सेट कर सकते हैं।
अब सबसे महत्वपूर्ण बात.  सीएसएस में किसी ब्लॉक की आंतरिक छाया बनाने के लिए, आपको इनसेट मान निर्दिष्ट करना होगा।  आप रंग परिभाषित करने के तुरंत बाद इसे निर्दिष्ट कर सकते हैं।
परिणामस्वरूप, हमें यह ब्लॉक प्राप्त हुआ:
HTML/CSS - टेक्स्ट छाया

html(पृष्ठभूमि: #fff;) शरीर(चौड़ाई: 80%; मार्जिन: 0 ऑटो; पृष्ठभूमि-रंग: rgba(150,60,60,0.54) बॉक्स-छाया: -1px 5px 5px 5px rgba(77,63,63) ,0.88) इनसेट; ) div(मार्जिन: 150px; बॉक्स-छाया: -1px 5px 5px 5px rgba(77,63,63,0.88); फ़ॉन्ट-आकार: 25px; ) 
इसी तरह से बनाया गया, लेकिन बॉक्स-छाया के बजाय संपत्ति का उपयोग किया गया .  संपत्ति पैरामीटर निम्नलिखित क्रम में हैं।
क्षैतिज बदलाव.
लंबवत बदलाव.
धुंधली त्रिज्या.  आवश्यक नहीं।
रंग।
जैसा कि आप देख सकते हैं, इस संपत्ति में कोई खिंचाव विकल्प नहीं है।  छाया का आकार हमेशा पाठ के आकार के समान होगा; इसे ठीक नहीं किया जा सकता।
एक दूसरे के ऊपर शैडो लगाना बहुत सुविधाजनक होता है।  ऐसा करने के लिए, आपको पैरामीटर के कई समूहों को सूचीबद्ध करने की आवश्यकता है
पहली छाया पाठ के करीब स्थित होगी, और दूसरी उसके ऊपर।  रूपरेखा और बॉर्डर गुणों के साथ काम करने की याद ताजा करती है, लेकिन यहां आप 2, 3 या अधिक छायाएं बना सकते हैं।
होवर शैडो - सीएसएस
अब आइए एक विशिष्ट स्थिति के लिए छाया बनाने पर नजर डालें।  हमारे उदाहरण में हम एक बटन का उपयोग करेंगे.
किसी बटन के लिए छाया बनाने के लिए, आपको सबसे पहले उसे लगाना होगा।  ए टैग खोलें, इसके लिए बटन क्लास लिखें और कोई भी पाठ मान, बेहतर प्रदर्शन के लिए।

सबसे पहले, आइए मार्जिन प्रॉपर्टी का उपयोग करके प्लेसमेंट सेट करें और बटन को एक निश्चित आकार तक बढ़ाएं।  इसे बढ़ाने के लिए, आप चौड़ाई और ऊंचाई गुणों का उपयोग कर सकते हैं, या पैडिंग संपत्ति का उपयोग कर सकते हैं।
अब हम बैकग्राउंड कलर, टेक्स्ट और फ्रेम सेट करते हैं।  हमारा बटन तैयार है, आइए छाया बनाना शुरू करें।
सबसे पहले, आइए बॉक्स-शैडो का उपयोग करके, आकार में छोटी, एक नियमित छाया बनाएं।  यह बटन पर मँडराए बिना, डिफ़ॉल्ट रूप से दिखाई देगा।


आइए सबसे सरल प्रभाव बनाएं - छाया बढ़ाएं।  आप इसे धुंधला कर सकते हैं या अपने स्वाद के अनुरूप खिंचाव बदल सकते हैं।
सर्वोत्तम प्रभाव के लिए, आइए एक नियमित लिंक के लिए ट्रांज़िशन प्रॉपर्टी सेट करें और समय 0.5s पर सेट करें।
अब हमारे पास एक सुंदर छाया वाला एक शानदार बटन है जो मँडराने पर आसानी से विस्तारित हो जाएगा।

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