Borders and Backgrounds Free web designing Course Tutorials #19
पहले, हमने CSS में रंगों के बारे में देखा है। इस ट्यूटोरियल में, हम कुछ अन्य CSS गुणों जैसे ऊँचाई, चौड़ाई, बॉर्डर और बैकग्राउंड को समझने जा रहे हैं।
Tut19.html नाम की एक नई फाइल बनाएं और हमेशा की तरह एक इंस्टेंट बॉयलरप्लेट जोड़ें। शीर्षक को शीर्षक अनुभाग के अंतर्गत <शीर्षक> टैग में ऊँचाई, चौड़ाई, बॉर्डर और पृष्ठभूमि के रूप में दें।
हमारा मूल HTML कोड इस प्रकार है -
<body>
<h3>This is heading</h3>
<p id="firstPara">This is a paragraph</p>
<h3>This is second heading</h3>
<p id="secondPara">This is my second paragraph</p>
<h3>This is third heading</h3>
<p id="thirdPara">This is my third paragraph</p>
</body>
आइए पहले पैराग्राफ में कुछ बदलाव करके शुरुआत करें। यदि हम कोड को इस प्रकार लिखते हैं -
#firstPara{
background-color: red;
height: 100px;
width:455px;
border: 4px solid green;
/* border-width: 4px;
border-color: green;
border-style: solid; */
border-radius: 11px;
}
हम देखेंगे कि टेक्स्ट की पृष्ठभूमि 100px की ऊंचाई के साथ लाल रंग में बदल जाएगी। इसकी चौड़ाई की बात करें तो इसे भी 455px बढ़ाया जाएगा। बॉर्डर की बात करें तो हम इसकी चौड़ाई, प्रकार, रंग तय कर सकते हैं। उपरोक्त उदाहरण में हम टेक्स्ट के चारों ओर एक 4px-सॉलिड और ग्रीन कलर बॉर्डर देखेंगे। बॉर्डर-त्रिज्या का प्रयोग बॉर्डर के सिरों को सुडौल बनाने के लिए किया जाता है। आपके द्वारा अब तक किए गए सभी परिवर्तन कुछ इस तरह दिखाई देंगे -
अब अगर यह स्थिति पैदा हो जाए कि आप एक छोर पर ही बॉर्डर देना चाहते हैं तो आप क्या करेंगे। आइए एक उदाहरण से समझते हैं-
#secondPara{
background-color: rgb(58, 243, 98);
height: 100px;
width:455px;
border-top: 2px solid rgb(231, 22, 231);
border-right: 2px solid rgb(18, 10, 133);
border-bottom: 2px solid rgba(9, 144, 27, 0.774);
border-left: 2px solid rgb(156, 42, 13);
border-top-left-radius: 4px;
border-top-right-radius: 14px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 24px;
}
यदि हम शीर्ष पर बॉर्डर के गुणों को बदलना चाहते हैं, तो इसे बॉर्डर-टॉप के साथ किया जा सकता है। इसी तरह, हम बॉर्डर-राइट, बॉर्डर-बॉटम और बॉर्डर-लेफ्ट की मदद से अन्य आयामों को भी बदल सकते हैं जैसा कि उदाहरण में दिखाया गया है। उसी तरह, हम अलग-अलग गुणों के साथ बॉर्डर के अलग-अलग सिरों को संशोधित कर सकते हैं। उदाहरण के लिए, हम बॉर्डर-टॉप-लेफ्ट-रेडियस को 4px, बॉर्डर-टॉप-राइट-रेडियस को 14px, बॉर्डर-बॉटम-लेफ्ट-रेडियस को 8px और बॉर्डर-बॉटम-राइट-रेडियस को 24px लिख सकते हैं। ऊपर किए गए सभी परिवर्तन इस प्रकार दिखाए जाएंगे-
अब क्या हुआ अगर आप अपने लिखे हुए टेक्स्ट के पीछे बैकग्राउंड इमेज जोड़ना चाहते हैं। आइए इसे कोड से समझते हैं -
#thirdPara{
height: 500px;
width:455px;
background-image: url('https://codewithharry.com/static/common/img/photo.png');
border: 2px solid red;
background-repeat: no-repeat; /* repeat-x and repeat-y will make it repeat on x and y axis */
/* background-position: 192px 34px; */
background-position: center center;
/* background-position: bottom right; */
/* background-position: top center; */
}
बैकग्राउंड इमेज जोड़ने के दो तरीके हैं। सबसे पहले, आप वेबसाइट से छवि का URL जोड़कर सीधे जोड़ सकते हैं। दूसरे, यदि आपके पास अपने स्थानीय कंप्यूटर पर फ़ाइलें हैं, तो आप सीधे छवि के पथ की प्रतिलिपि बना सकते हैं। दिए गए निर्देशों के अनुसार विभिन्न पदों पर छवि को संरेखित करने के लिए पृष्ठभूमि स्थिति का उपयोग किया जाता है। आप नीचे किए गए परिवर्तनों को देख सकते हैं-
इसलिए, मेरा मानना है कि आपको सीमाओं और रंगों से संबंधित विभिन्न अन्य गुणों की अवधारणाओं को समझना चाहिए। बेहतर ज्ञान प्राप्त करने के लिए आप इन गुणों के अन्य संयोजनों को आज़मा सकते हैं।
