HR Line Color & Design Change

HR लाइन का कलर, डिजाइन और आकार चेंज कैसे करें ?

क्या आप अपने Blog पोस्ट के अंदर HR लाइनों का उपयोग करते हैं, यदि नहीं। या यदि आप करते हैं। और आप सुनिश्चित नहीं है, कि इन HR लाइनों को अलग-अलग रंग रूप कैसे दें, इनकी डिजाइन कैसे बदलें, इनका आकार कैसे बदलें, तो आप निश्चिंत हो जाए। आप बिल्कुल सही लेख पर है। और आज इस लेख में आप जानने वाले हैं, कि आप इन लाइनों को अलग-अलग डिजाइन से अनुकुलित कैसे कर सकते हैं।

तो दोस्तों जानने के लिए इस पोस्ट को लास्ट तक पढ़े, और पढ़ने का आनंद लें।

जैसा कि आप जानते ही होंगे, कि पोस्ट के अंदर लाइन ऐड करने के लिए पोस्ट  html  के अंदर <hr /> tag का उपयोग करना पड़ता है, इसके बाद पोस्ट में Default लाइन ऐड हो जाती है।

लेकिन बहुत से नए ब्लॉगर हैं, जिन्हें यह पता नहीं है, कि इन्हें हम अलग-अलग डिजाइन में कैसे बदलें।

इन्हें आप दो तरीकों से स्टाइल के जरिए, अलग-अलग डिजाइन में बदल सकते हैं।

[1] जो <hr /> tag आप लाइन ऐड करने के लिए लगाते हैं, इसी के अंदर आप style=" " 'स्टाइल बराबर डबल कोट' का उपयोग करके डबल कोट के अंदर सीएसएस का उपयोग करके अपनी लाइन को स्टाइल कर सकते हैं, और उसको अलग आकार और रंग रूप दे सकते हैं।

[2] अपनी लाइनों को स्टाइल करने के लिए एक अलग से <style> और </style> टैग बनाकर इसमें सीएसएस का उपयोग करके स्टाइल कर सकते हैं।

लेकिन इसके लिए पहले आपको हर एचआर टैग में अलग-अलग विशेषता जोड़नी है। जिसका उदाहरण आप नीचे देख सकते हैं।

उदाहरणः
<hr class="A" />
<hr class="B" />
<hr class="C" />
<hr class="D" />
<hr class="D1" />
<hr class="D2" />
<hr class="D3" />
<hr class="E" />

हमने <HR> टेग में class विशेषता A, B, C, D, E जोड़कर सभी को अलग-अलग विशेषता दे दी है, ताकि हम इन्हे style करते समय अलग-अलग परिभाषित करके इनको अलग-अलग आकार ओर रंग रूप से स्टाइल कर सकें।

यदि आप चाहें तो इन HR Tag मैं A, B, C, D, E की जगह अपने हिसाब से अलग नाम भी दे सकते हैं।

HR Tag में लाइन को स्टाइल कैसे करें?

देखा जाए, तो कोई अधिक फर्क नहीं है। जो कोड हम स्टाइल टैग अलग से बनाकर वहां उपयोग करेंगे। वही कोड हमें यहा <hr /> Tag के अंदर भी उपयोग करना है। बस फर्क है, तो यह है, कि यहां थोड़ा लिखने का तरीका अलग होगा। यहां पर हमें स्टाइल टैग बनाने की जरूरत नहीं है, लेकिन एचआर टैग के अंदर style लिखना बहुत जरूरी है।

यह कोड नीचे दी गई लाइन को प्रदर्शित कर रहा है। आप भी ऐसे hr टैग के अंदर style Code का उपयोग करके लाइन को स्टाइल दे सकते हैं।

<hr style="border: 6px dashed green; Border-radius: 2px;" />

उदाहरण:

---

बदलाव: आप इसमें अपनी इच्छा अनुसार बदलाव कर सकते हैं लाइन हाइट अध्ययन कम करने के लिए 6px में 6 की जगह कम या अधिक अंक डाले, लाइन बदलने के लिए dashed की जगह dotted या solid डाले, Color बदलने के लिए green की जगह अपना मन पसंद कलर नाम डाले या कोई कलर कोड डाले, फिर पूर्वालोकन करें और देखें कि लाइन कैसी दिखती है।

आप देख सकते हैं कि लाइट मैं दोनों साइड के घूमने थोड़े से सॉफ्ट और राउंड दिखाई दे रहे हैं इनको कम या अधिक करने के लिए Border-radius: 2px; में 2 की जगह कम या अधिक अंक डाले, यदि आप लाइन के कोने राउंड नहीं करना चाहते तो आप इस कोड को Border-radius: 2px; पूरा हटा दे।

आप इससे भी कहीं अधिक कोडिंग करके लाइनों को और अधिक डिजाइन दे सकते हैं, नीचे मैं आपको कहीं सारी डिजाइन लाइनों के बारे में बताने वाला हूं।

HR line को अलग style टैग में स्टाइल कैसे करें?

जैसा कि मैंने ऊपर चरण [2] में बताया की एक अलग style टैग के जरिए, HR लाइन को स्टाइल करने के लिए। हमें हर एचआर टैग में अलग-अलग विशेषता जोड़ने पड़ती है, ताकि हम style के अंदर उन्हें अलग-अलग परिभाषित कर सकें, और स्टाइल कर सकें। नहीं तो सभी लाइन एक ही डिजाइन में बदल सकती है।

यहा नीचे मैंने नंबर वाइज अलग style टैग मैं HR लाइन डिजाइन करने के बारे में पूरी जानकारी दे रखी है। जिसमें मैंने 8 लाइन डिजाइन की है, जिसके कोड भी आपको यहां पर देखने को मिल जाएंगे। नीचे की स्लाइड् में पढ़ें।



[1] Solid: एक ठोस आकार वाली लाइन जो एक सिंपल सीधी रेखा है। जिसे हम <hr class="A" /> मैं जोड़ने वाले हैं।

इसके लिए हमें पोस्ट के अंदर  Html  में जाना है, और कहीं पर भी <style> टैग बनाएं, और फिर उसे इस </style> टैग से क्लोज कर देंगे। और फिर इन दोनों के अंदर हमें एचआर लाइन को स्टाइल करना है।

उदाहरण: स्टाइल के अंदर> hr.A {} <इनका उपयोग करें, और फिर इन {के अंदर} HR लाइन को स्टाइल करें।

मैंने hr.A पहले क्यों जोड़ा है?
हम जो भी स्टाइल, एचटीएमएल, सीएसएस या अन्य कोड का उपयोग करते हैं। इसे कौन समझता है। हम इनका उपयोग किसके लिए कर रहे हैं।

हम इसका उपयोग ब्राउज़र को समझाने के लिए करते हैं। जिसमें आपकी साइट उपयोगकर्ताओं के द्वारा क्लिक किए जाने के बाद ओपन होती है। जी हां हम इनका उपयोग ब्राउज़र को समझाने के लिए करते हैं, ताकि ब्राउज़र इन कोड को समझ कर हम जिसे चाहते हैं, उसे डिजाइन दे सके।

मेंने hr.A पहले उपयोग किया, ताकि ब्राउज़र समझ सके की hr टैग के अंदर कोई A नाम की विशेषता है, जिसे डिजाइन करना है। और इसे डिजाइन क्या देनी है, यह हम ब्राउज़र को {इसके अंदर} समझाते हैं। जिसका उदाहरण आप नीचे कहीं सुंदर लाइनों मेंं देखेंगे।

कुछ ब्राउज़र है, जिसकी सूची मैंने नीचे रखी है, यह <hr> tag का पूर्ण रुप से समर्थन करते हैं। लेकिन कुछ ब्राउज़र हैं या हो सकते हैं, जो hr Tag का पूर्ण रूप से समर्थन न करें, और आपकी लाइन को ठीक से प्रदर्शित न करें।

अब आप नीचे 8 सुंदर डिजाइन लाइनों का आनंद लें, और इन्हें अपने पोस्ट Article में बनाना सीखे।

hr.A {border-top: 8px solid blue; border-radius: 4px;}

हमने नीचे दी गई इस एचआर लाइन को 8px मोटा solid ठोस और ब्लू कलर स्टाइलिश किया है। और border-radius: 4px; का उपयोग करके इसके कोने कम कर दिये हैं।

---

[2] dotted: अब हम एक बिंदु के प्रकार की लाइन बनाने वाले हैं, जो आपके आर्टिकल में बिंदु लाइन ऐड कर देगी।

और बिंदु लाइन बनाने के लिए हम <hr class="B" /> को स्टाइल करेंगे।

hr.B {border-top: 6px dotted red;}

---

यहां पर हमने बिल्कुल छोटे शॉर्टकट कोड से बिंदु लाइन बनाई है। इसे हमें ज्यादा स्टाइल देने की जरूरत नहीं है। बिंदु Line की height कम या अधिक करने के लिए 6px में 6 की जगह अधिक या कम अंक डालें। और पूर्वालॉकन करें, की आपकी बिंदु लाइन कैसे दिखाई देती है।

[3] Dashed: यह आपके लिए सुंदर घटक लाइन बनाएगा, उपर नंबर दो कोड मैं और इस Code में कोई अधिक फर्क नहीं है। बस ऊपर की लाइन से इसे अलग बनाने के लिए हमने Dashed का उपयोग किया है, ताकि यह लाइन ऊपर की लाइन से अलग बिंदू  रैखा जाए और magenta का उपयोग लाइन का कलर चेंज करने के लिए किया है।

hr.C { border: 6px dashed magenta;}

---

[4] Liner-gradient: यहां पर हमने Liner-gradient और थोड़े से सीएसएस का उपयोग करके एक सुंदर टेडी-मेडी रेखा तैयार की है, जो उपयोगकर्ताओं को रोमांचित बनाती है।

hr.D { border: none; width: 100%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 23px; background: linear-gradient(135deg, #fafafa 25%, transparent 25%) -35px 0, linear-gradient(225deg, #fafafa 25%, transparent 25%) -35px 0, linear-gradient(315deg, #fafafa 25%, transparent 25%), linear-gradient(45deg, #fafafa 25%, transparent 25%); background-size: 23px 23px; background-color: #bf9000;}

---

(D1) Liner-gradient: नीचे दी गई लाइन ऊपर दिए गए कोड मैं थोड़ा सा बदलाव करके बनाई गई है। मैंने ऊपर दिए गए कोड में सिर्फ height: और Background-size: कोड में बदलाव किए हैं। और फिर एक सुंदर पहाड़ों वाली लाइन तैयार की है, जिसे आप नीचे देख सकते हैं।

hr.D1 { border: none; width: 100%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 20px; background: linear-gradient(135deg, #fafafa 25%, transparent 25%) -20px 0, linear-gradient(225deg, #fafafa 25%, transparent 25%) -20px 0, linear-gradient(315deg, #fafafa 25%, transparent 25%), linear-gradient(45deg, #fafafa 25%, transparent 25%); background-size: 40px 40px; background-color: #bf9000;}

---

(D2) Liner-gradient: यह लाइन भी ऊपर दिए गए CSS कोड में छोटा सा बदलाव करके ही बनाई गई है। इसे भी हमने height: और Background-size: कोड में बदलाव करके बनाया है। जो काफी सुंदर रेखा है।

hr.D2 { border: none; width: 100%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 20px; background: linear-gradient(135deg, #fafafa 25%, transparent 25%) -20px 0, linear-gradient(225deg, #fafafa 25%, transparent 25%) -20px 0, linear-gradient(315deg, #fafafa 25%, transparent 25%), linear-gradient(45deg, #fafafa 25%, transparent 25%); background-size: 20px 20px; background-color: #bf9000;}

---

(D3) Liner-gradient: यह लाइन भी ऊपर दिए गए कोड में बदलाव करके बनाई है। और इससे हम यह समझते हैं, कि style CSS की मदद से हम काफी कुछ बदलाव कर सकते हैं। आप ऊपर दिए गए कोड और नीचे दिए गए इस कोड को देखकर यह पता लगा सकते हैं, कि मैंने इन कोड में कितना बदलाव किया है, तभी जाकर इस लाइन में इतना बदला हुआ है।

hr.D3 { border: none; width: 100%; margin: auto; margin-top: 5%; margin-bottom: 5%; height: 20px; background: linear-gradient(105deg, #fafafa 25%, transparent 25%) -15px 0, linear-gradient(195deg, #fafafa 25%, transparent 25%) -15px 0, linear-gradient(285deg, #fafafa 25%, transparent 25%), linear-gradient(15deg, #fafafa 25%, transparent 25%); background-size: 25px 25px; background-color: #bf9000;}

---

[5] incline: हमने इस लाइन को सीधी न रखते हुए तिरछी बनाई है। ताकि मैं आपको यह बता सकूं, कि आप CSS की मदद से तिरछी लाइनें भी बना सकते हैं, इस code में मैंने लाइन को तिरछी रखने के लिए transform: rotate(5deg); का उपयोग किया है। ताकि यह लाइन सिद्धि न रहकर तिरछी हो जाए।

आप इस कोड में अंक 5 कि जगह अधिक या कम अंक डालकर लाइन को सीधी या और टेडी कर सकते हैं।

hr.E { width: 100%; margin: auto; margin-top: 5%; margin-bottom: 5%; transform: rotate(5deg); background-color: #38761d; height: 6px;}

---

अनुमतिः आप इन कोड को कॉपी कर सकते हैं। और अपने पोस्ट  HTML  में <style> </style> टैग बनाकर उनके अंदर इन्हें पेस्ट कर सकते हैं। इससे आपका समय भी बचेगा। और आप जल्दी एक सुंदर HR रेखा बना पाओगे।

<HR /> टेग का नीचे दिए गए सूचीबद्ध ब्राउज़र समर्थन करते हैं।
(1) गूगल क्रोम
(2) इंटरनेट एक्सप्लॉरर
(3) फ़ायरफ़ॉक्स
(4) ओपेरा
(5) सफारी
या अन्य डिवाइस ब्राउज़र भी हो सकते हैं।

तो दोस्तों हमें उम्मीद है कि आपको हमारी यह पोस्ट पसंद आई होगी और अगर पोस्ट पसंद आई है। तो इसे अपने दोस्तों में शेयर करें ताकि आपके दोस्तों को भी इस पोस्ट के बारे में पता चल सके और हमें कमेंट करें कि आपको हमारी यह पोस्ट कैसी लगी।

 यदि आपका कोई प्रश्न है, तो नीचे Comment बॉक्स में हमें बताएं।