एचआर टैग के साथ वेब पृष्ठों पर दिलचस्प दिखने वाली रेखाएं बनाना
यदि आपको क्षैतिज, विभाजक-शैली रेखाओं को अपनी वेबसाइटों में जोड़ने की आवश्यकता है, तो आपके पास कुछ विकल्प हैं। आप अपने पृष्ठों पर उन पंक्तियों की वास्तविक छवि फ़ाइलों को जोड़ सकते हैं, लेकिन इसके लिए आपके ब्राउज़र को उन फ़ाइलों को पुनर्प्राप्त करने और लोड करने की आवश्यकता होगी, जो साइट प्रदर्शन पर नकारात्मक प्रभाव डाल सकते हैं।
आप सीएसएस सीमा संपत्ति का उपयोग सीमाओं को जोड़ने के लिए कर सकते हैं जो शीर्ष पर या तत्व के निचले हिस्से में लाइनों के रूप में कार्य करते हैं, प्रभावी रूप से आपकी विभाजक रेखा बनाते हैं।
अंत में, आप क्षैतिज नियम के लिए HTML तत्व का उपयोग कर सकते हैं -
क्षैतिज नियम तत्व
यदि आपने कभी किसी वेब पेज पर कोई तत्व डाला है, तो संभवतः आपने पाया है कि इन पंक्तियों को प्रदर्शित करने का डिफ़ॉल्ट तरीका आदर्श नहीं है। इसका अर्थ यह है कि आपको इन तत्वों की दृश्य उपस्थिति को समायोजित करने के लिए सीएसएस पर जाना होगा ताकि आप अपनी साइट को कैसे देखना चाहते हैं।
एक मूल एचआर टैग प्रदर्शित होता है जिस तरह ब्राउज़र इसे प्रदर्शित करना चाहता है। आधुनिक ब्राउज़र आम तौर पर लाइन बनाने के लिए 100% की चौड़ाई, 2 पीएक्स की ऊंचाई और काले रंग में 3 डी सीमा के साथ अनस्टाइल एचआर टैग प्रदर्शित करते हैं।
यहां एक मानक एचआर तत्व का एक उदाहरण दिया गया है या आप इस छवि में देख सकते हैं कि आधुनिक ब्राउज़र में एक अनियंत्रित एचआर कैसा दिखता है।
चौड़ाई और ऊंचाई ब्राउज़र भर में लगातार हैं
वेब ब्राउज़र में लगातार एकमात्र शैलियों चौड़ाई और शैलियों हैं। ये परिभाषित करते हैं कि रेखा कितनी बड़ी होगी। यदि आप चौड़ाई और ऊंचाई को परिभाषित नहीं करते हैं तो डिफ़ॉल्ट चौड़ाई 100% है और डिफ़ॉल्ट ऊंचाई 2px है।
इस उदाहरण में चौड़ाई मूल तत्व का 50% है (नीचे दिए गए इन उदाहरणों में इनलाइन शैलियों को शामिल करें। उत्पादन सेटिंग में, इन शैलियों को वास्तव में आपके सभी पृष्ठों में प्रबंधन की आसानी के लिए बाहरी स्टाइल शीट में लिखा जाएगा):
शैली = "चौड़ाई: 50%;">
और इस उदाहरण में ऊंचाई 2em है:
शैली = "ऊंचाई: 2em;">
सीमाओं को बदलना चुनौतीपूर्ण हो सकता है
आधुनिक ब्राउज़रों में, ब्राउज़र सीमा समायोजित करके लाइन बनाता है। तो यदि आप शैली की संपत्ति के साथ सीमा को हटाते हैं, तो पृष्ठ पृष्ठ पर गायब हो जाएगी। जैसा कि आप देख सकते हैं (ठीक है, आप कुछ भी नहीं देखेंगे, क्योंकि लाइनें अदृश्य हो जाएंगी) इस उदाहरण में:
शैली = "सीमा: कोई नहीं;">
सीमा आकार, रंग और शैली को समायोजित करने से लाइन अलग दिखाई देगी और सभी आधुनिक ब्राउज़रों में भी यही प्रभाव पड़ता है। उदाहरण के लिए, इस प्रदर्शन में सीमा लाल, धराशायी, और 1 पीएक्स चौड़ी है:
शैली = "सीमा: 1 पीएक्स डैश # 000;">
लेकिन यदि आप सीमा और ऊंचाई बदलते हैं, तो शैली आधुनिक ब्राउज़र में बहुत पुराने ब्राउज़र में थोड़ा अलग दिखती है। जैसा कि आप इस उदाहरण में देख सकते हैं, यदि आप इसे आईई 7 और नीचे देखते हैं (एक ब्राउज़र जो दुर्भाग्य से पुराना है और अब माइक्रोसॉफ्ट द्वारा समर्थित नहीं है) वहां एक बेवल वाली आंतरिक रेखा है जो अन्य ब्राउज़रों (आईई 8 और ऊपर सहित) में प्रदर्शित नहीं होती है। :
शैली = "ऊंचाई: 1.5 मीटर; चौड़ाई: 25em; सीमा: 1 पीएक्स ठोस # 000;">
उन पुरातन ब्राउज़र वास्तव में आज वेब डिज़ाइन में चिंता का विषय नहीं हैं, क्योंकि उन्हें बड़े पैमाने पर अधिक आधुनिक विकल्पों के साथ बदल दिया गया है।
एक पृष्ठभूमि छवि के साथ एक सजावटी रेखा बनाओ
रंग के बजाए, आप अपने एचआर के लिए पृष्ठभूमि छवि को परिभाषित कर सकते हैं ताकि यह ठीक वैसे ही दिख सके जैसा आप चाहते हैं, लेकिन फिर भी आपके मार्कअप में अर्थात् प्रदर्शित होता है।
इस उदाहरण में हमने एक ऐसी छवि का उपयोग किया जो तीन लहरों वाली रेखाओं में से एक है। पृष्ठभूमि छवि के रूप में इसे दोहराने के साथ सेट करके, यह उस सामग्री में एक ब्रेक बनाता है जो आपको पुस्तकों में लगभग दिखता है:
शैली = "ऊंचाई: 20 पीएक्स; पृष्ठभूमि: # एफएफ यूआरएल (aa010307.gif) दोहराना स्क्रॉल केंद्र; सीमा: कोई नहीं;">
एचआर तत्वों को बदलना
CSS3 के साथ, आप अपनी लाइनों को और अधिक रोचक बना सकते हैं। एचआर तत्व पारंपरिक रूप से एक क्षैतिज रेखा है, लेकिन सीएसएस परिवर्तन संपत्ति के साथ, आप बदल सकते हैं कि वे कैसे दिखते हैं। एचआर तत्व पर एक पसंदीदा परिवर्तन रोटेशन को बदलने के लिए है।
आप अपने एचआर तत्व को घुमा सकते हैं ताकि यह थोड़ा सा विकर्ण हो:
घंटा {
-मोज़-ट्रांसफॉर्म: घुमाएं (10 डिग्री);
-webkit-transform: घुमाने (10deg);
-ओ-ट्रांसफॉर्म: घुमाएं (10 डिग्री);
-एमएस-ट्रांसफॉर्म: घुमाएं (10 डिग्री);
परिवर्तन: घुमाने (10deg);
}
या आप इसे घुमा सकते हैं ताकि यह पूरी तरह लंबवत हो:
घंटा {
-मोज़-ट्रांसफॉर्म: घुमाएं (90 डिग्री);
-वेबिट-ट्रांसफॉर्म: घुमाएं (90 डिग्री);
-ओ-ट्रांसफॉर्म: घुमाएं (90 डिग्री);
-एमएस-ट्रांसफॉर्म: घुमाएं (90 डिग्री);
परिवर्तन: घुमाने (90 डिग्री);
}
याद रखें कि यह दस्तावेज़ में अपने वर्तमान स्थान के आधार पर एचआर को घुमाता है, इसलिए आपको इसे प्राप्त करने के लिए स्थिति को समायोजित करने की आवश्यकता हो सकती है। किसी डिज़ाइन में लंबवत रेखाएं जोड़ने के लिए इसका उपयोग करने की अनुशंसा नहीं की जाती है, लेकिन यह एक दिलचस्प प्रभाव प्राप्त करने का एक तरीका है।
अपने पृष्ठों पर लाइनों को पाने का एक और तरीका
एक बात यह है कि एचआर तत्व का उपयोग करने के बजाय कुछ लोग अन्य तत्वों की सीमाओं पर भरोसा करते हैं। लेकिन कभी-कभी एचआरआर सीमाओं को स्थापित करने की कोशिश करने के बजाय उपयोग करने के लिए बहुत सुविधाजनक और आसान है। कुछ ब्राउज़रों के बॉक्स मॉडल के मुद्दे सीमा को स्थापित करने के लिए भी कर सकते हैं।