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

सीएसएस बॉक्स-छाया वाक्यविन्यास

... बॉक्स-छाया: XY R1 R2 रंग; ...

• एक्स - एक्स अक्ष के साथ ऑफसेट (क्षैतिज)
• Y - Y अक्ष के साथ ऑफसेट (ऊर्ध्वाधर)
• R1 - धुंधलापन (मूल्य जितना अधिक होगा, संक्रमण उतना ही आसान होगा)
• आर2 - विस्तार की त्रिज्या (यदि सकारात्मक है, तो यह फैलता है, नकारात्मक है, तो यह संपीड़ित होता है)
• रंग - रंग (किसी भी प्रारूप में निर्दिष्ट किया जा सकता है: #RGB, रंग का नाम)
• इनसेट - यदि यह मान मौजूद है, तो छाया ब्लॉक (तत्व) के अंदर स्थित होगी

उदाहरण 1. ऑफसेट के बिना बॉक्स-छाया के साथ HTML फ़्रेम

HTML पेज पर CSS बॉक्स-शैडो प्रॉपर्टी का उपयोग करके छाया का उपयोग करने का सबसे आसान तरीका नीचे दिया गया है, जब यह विस्थापन के बिना पूरे फ्रेम के चारों ओर समान रूप से लपेटता है।

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

• -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
• -moz-box-shadow - для Firefox до версии 4.0

Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность. Когда я начинал изучать (примерно 5-6 лет тому назад), я не догадывался о существовании , и мне при создании сайта приходилось делать тень блоков изображением. Это было очень неудобно, да и не всегда получалось так, как хотелось. Спасибо возможностям CSS, которые упростили труд веб-дизайнеров. Сегодня я покажу возможность в CSS, как создать для блоков тень.

Для добавления тени в CSS используется свойство box-shadow .

1. сдвиг тени по горизонтали (до 100px вправо, до -100px влево);
2. сдвиг по вертикали (до 100px вниз, до -100px вверх);
3. размытие тени (0 - четкая тень, 100 - сильно размытая тень);
4. растяжение тени (до 100px - растяжение, до -100px - сжатие);
5. цвет тени;
6. inset - тень внутри элемента, без inset тень будет наружу.

परिणाम :

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

कोड	उदाहरण:
बॉक्स-छाया: 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(21) 5,190, 30), 6पीएक्स 6पीएक्स आरजीबी(187,162,2), 7पीएक्स 6पीएक्स आरजीबी(214,189,29), 7पीएक्स 7पीएक्स आरजीबी(186,161,1), 8पीएक्स 7पीएक्स आरजीबी(213,188,28), 8पीएक्स 8पीएक्स आरजीबी(185,160,0), 9पीएक्स 8 पीएक्स आरजीबी(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)); बॉक्स-शैडो: इनसेट rgba(0,0,0,.5) -3px -3px 8px, इनसेट rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
परिणाम
:


 
 
 
 
 
 
 

 

 
वेबसाइट
 

 

परिणाम
:

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


 
दाहिनी और नीचे तीव्र छाया।
बॉक्स-छाया: -5px -5px;
 


 
बायीं और ऊपर तीव्र छाया।
बॉक्स-छाया: 0 0 5px;
 


 
किसी तत्व के चारों ओर धुंधली छाया.
बॉक्स-छाया: 0 0 5px 2px;
 


 
छाया को 2 पिक्सेल तक विस्तृत करें.
बॉक्स-छाया: 0 0 5px 2px लाल;
 


 
तत्व के चारों ओर लाल चमक.
बॉक्स-छाया: 0.4em 0.4em 5px rgba(122,122,122,0.5);
 


 
पारदर्शी छाया.
बॉक्स-छाया: इनसेट 0 0 6px;
 


 
अंदर छाया.
जैसा कि तालिका से देखा जा सकता है, छाया बदलाव को पिक्सेल में निर्दिष्ट करने की आवश्यकता नहीं है, हालांकि यह सुविधाजनक है।  छाया का रंग किसी भी उपलब्ध प्रारूप में निर्दिष्ट किया जा सकता है; उदाहरण के लिए, पारभासी छाया प्राप्त करने के लिए, आरजीबीए प्रारूप उपयुक्त है; ऐसी छाया किसी भी पृष्ठभूमि पर अच्छी लगेगी।  उदाहरण 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) से कम हो जाता है।  दूसरी छाया के पैरामीटर दशमलव बिंदु के बाद इंगित किए जाते हैं; छाया को चित्र के दाईं ओर प्रदर्शित किया जाता है और समरूपता के लिए इसे छोटा भी किया जाता है।

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

आइए इस संपत्ति के संभावित मूल्यों पर क्रम से विचार करें:
अर्थ
विवरण
कोई नहीं
छाया प्रदर्शित नहीं होती. यह व्यतिक्रम मूल्य है।

इनसेट
वैकल्पिक मूल्य.यदि यह मान निर्दिष्ट नहीं किया गया है (डिफ़ॉल्ट), तो छाया तत्व के बाहर होगी और तत्व के उभार का प्रभाव पैदा करेगी।  यदि कीवर्ड (मान) इनसेट मौजूद है, तो छाया तत्व के अंदर गिरेगी और एक प्रभाव पैदा करेगी।  दूसरे शब्दों में, यह बाहरी छाया से आंतरिक छाया में परिवर्तन है।
h-छाया
आवश्यक मूल्य.क्षैतिज छाया का स्थान निर्धारित करता है.  नकारात्मक मानों की अनुमति है.
वि-छाया
आवश्यक मूल्य.ऊर्ध्वाधर छाया का स्थान निर्धारित करता है.  नकारात्मक मानों की अनुमति है.
धुंधला-त्रिज्या
वैकल्पिक मूल्य.धुंधला त्रिज्या सेट करता है.  मान जितना अधिक होगा, धुंधलापन उतना ही अधिक होगा, जिससे छाया बड़ी और हल्की हो जाएगी।  यदि मान निर्दिष्ट नहीं है, तो मान 0 (तीव्र - स्पष्ट छाया) होगा।  नकारात्मक मानों की अनुमति नहीं है.
प्रसार-त्रिज्या
वैकल्पिक मूल्य.छाया का आकार (छाया खिंचाव त्रिज्या)।  सकारात्मक मूल्यों के साथ छाया का विस्तार होगा, और नकारात्मक मूल्यों के साथ यह सिकुड़ जाएगी।  यदि कोई मान निर्दिष्ट नहीं है, तो मान 0 होगा (छाया तत्व के आकार से मेल खाती है)।
रंग
वैकल्पिक मूल्य.छाया रंग निर्दिष्ट करता है (HEX, RGB, RGBA, HSL, HSLA, " पूर्वनिर्धारित रंग")। डिफ़ॉल्ट मान काला है।
तत्वों के लिए छाया बनाने के लिए आपको जिन मुख्य बिंदुओं को समझने की आवश्यकता है वे हैं:
मैं आपका ध्यान इस तथ्य की ओर आकर्षित करना चाहूंगा कि संपत्ति डब्बे की छायावर्तमान में सभी आधुनिक ब्राउज़र द्वारा समर्थित:
संपत्ति

ओपेरा

आईएक्सप्लोरर

किनारा
डब्बे की छाया
10.0
4.0
-वेबकिट-
4.0
3.5
-मोज़-
10.5
5.1
3.1
-वेबकिट-
9.0
12.0

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



 


 
 

बॉक्स-छाया:10px 10px 0px लाल;
 
क्लास = "टेस्ट2" >बॉक्स-छाया:10px 10px 10px #777;
 



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






 
 

 

 



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



 


 
 

 

 



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

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

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