Blog post Article के बीच में Line कैसे खींचे? 8 सर्वश्रेष्ठ Design रेखाएं।
क्या आप अपने ब्लॉग पोस्ट के अंदर सुंदर लाइनों का उपयोग करना चाहते हैं, और अपनी पोस्ट को ठीक से समझाने के लिए और सुंदरता देने के लिए अनुकूलित करना चाहते हैं। तो आप बिल्कुल सही पृष्ठ पर हैं, आज इस पोस्ट में आप जानेंगे, कि अपने ब्लॉगर ब्लॉग की पोस्टों के अंदर लाइनों का उपयोग कैसे कर सकते हैं।उम्मीद है, आपको हमारी यह पोस्ट पसंद आएगी, और अपने ब्लॉगर ब्लॉग कि पोस्टों के अंदर लाइनों का उपयोग करने के बारे में जानने के लिए इस पोस्ट को अंत तक पढ़े।
दोस्तों लाइनें कई प्रकार की होती है, आप अपने ब्लॉग पोस्ट के अंदर अलग-अलग प्रकार की लाइनों का उपयोग कर सकते हैं। बिल्कुल आसान एचटीएमएल कोड एवं सीएसएस का अपने पोस्ट एचटीएमएल के अंदर उपयोग करके आप अलग-अलग डिजाइन में लाइने बना सकते हैं, और अपनी पोस्ट को सुंदरता दे सकते हैं।
इस पोस्ट में मैं आपको आठ अलग-अलग प्रकार की लाइनों के बारे में बताने वाला हूं, जिन्हें आप अपनी पोस्ट के अंदर ऐड कर सकते हैं चलिए शुरू करते हैं।
किसी भी पोस्ट में लाइन ऐड करने के लिए अपने पोस्ट Html विकल्प मैं जहां पर आप लाइन दिखाना चाहते हैं। वहां पर इस <hr /> टैग का उपयोग करें। यह आपके पोस्ट आर्टिकल के अंदर एक डिफॉल्ट लाइन ऐड कर देगा।
उदाहरण:
अब आपको इस लाइन को अलग-अलग डिजाइन में दिखाने के लिए सीएसएस का उपयोग करना पड़ता है।
तो चलिए जानते हैं, कि आप <style> सीएचएस के जरिए hr लाइन को अलग अलग डिजाइन में कैसे बदल सकते हैं।
एचआर लाइन आपकी पोस्ट आर्टिकल बॉडी का हिस्सा होती हैं, और इसे अलग-अलग स्टाइल देने के लिए हम <styles> टैग विशेेषता के अंदर CSS का उपयोग करते हैं।
यदि आप अपनें आर्टिकल में एक से अधिक लाइनों का उपयोग करना चाहते हैं, और उन्हें अलग-अलग आकार और स्टाइल देना चाहते हैं। तो आपको हर एचआर टैग में अलग-अलग विशेषता जोड़नी है।
उदाहरणः
<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 जोड़कर सभी को अलग-अलग विशेषता दे दी है, ताकि हम इसे अलग-अलग आकार स्टाइल्स दे सकें।
HR line को अलग-अलग स्टाइल कैसे दें?
[1] Solid: एक ठोस आकार वाली लाइन जो एक सिंपल सीधी रेखा है। जिसे हम <hr class="A" /> मैं जोड़ने वाले हैं।इसके लिए हमें पोस्ट के अंदर Html में जाना है, और कहीं पर भी <style> टैग बनाएं, और फिर उसे इस </style> टैग से क्लोज कर देंगे। और फिर इन दोनों के अंदर हमें एचआर लाइन को स्टाइल करना है।
उदाहरण: स्टाइल के अंदर> hr.A {} <इनका उपयोग करें, और फिर इन {के अंदर} HR लाइन को स्टाइल करें।
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-top: 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 बॉक्स में हमें बताएं।
Comments
Post a Comment