सीमाएं

द सीएसएस पॉडकास्ट - 016: बॉर्डर

बॉक्स मॉडल मॉड्यूल में, हमने बॉक्स मॉडल के हर सेक्शन की जानकारी देने के लिए, एक फ़्रेम एनॉलॉजी का इस्तेमाल किया.

बॉर्डर बॉक्स आपके बॉक्स का फ़्रेम होता है. और border प्रॉपर्टी आपको उस फ़्रेम को बनाने के लिए विकल्पों की बहुत बड़ी रेंज देती हैं किसी भी स्टाइल में बनाया जा सकता है.

बॉर्डर प्रॉपर्टी

अलग-अलग border प्रॉपर्टी से बॉर्डर के अलग-अलग हिस्सों की स्टाइल तय की जा सकती है.

स्टाइल

बॉर्डर दिखाने के लिए, आपको यह तय करना होगा कि border-style. आपके पास इनमें से चुनने के लिए कुछ विकल्प हैं:

ridge, inset, outset, और groove स्टाइल का इस्तेमाल करते समय, कंट्रास्ट और गहराई उपलब्ध कराने के लिए ब्राउज़र दूसरे दिखाए गए रंग के लिए बॉर्डर के रंग को गहरा कर देगा. यह अलग-अलग ब्राउज़र और हर ब्राउज़र के लिए अलग-अलग हो सकता है. खास तौर पर गहरे रंगों के लिए, जैसे कि black. Chrome में, ये बॉर्डर शैलियां स्थिर दिखाई देंगी और Firefox में, तब उन्हें हल्का कर दिया जाएगा, ताकि उनका रंग दूसरा गहरा हो जाए.

ब्राउज़र का व्यवहार अन्य बॉर्डर शैलियों के लिए भी भिन्न हो सकता है, इसलिए, अलग-अलग ब्राउज़र में अपनी साइट की जांच करना ज़रूरी है. हर ब्राउज़र dotted और dashed स्टाइल को कैसे रेंडर करता है, इस अंतर का एक आम उदाहरण यह है.

अपने बॉक्स के दोनों ओर बॉर्डर शैली सेट करने के लिए, आप इसका इस्तेमाल कर सकते हैं border-top-style border-right-style, border-left-style, और border-bottom-style.

शॉर्टहैंड

margin और padding की तरह, आप इसका इस्तेमाल कर सकते हैं border 'शॉर्टहैंड प्रॉपर्टी' का इस्तेमाल करें.

.my-element {
    border: 1px solid red;
}

border शॉर्टहैंड में मानों का क्रम border-width है, border-style और फिर border-color.

रंग

बॉक्स के हर तरफ़ या हर तरफ़ रंग सेट किया जा सकता है. border-color. डिफ़ॉल्ट रूप से, इसमें बॉक्स के मौजूदा टेक्स्ट रंग का इस्तेमाल किया जाता है: currentColor. इसका मतलब है कि अगर सिर्फ़ बॉर्डर प्रॉपर्टी का एलान किया जाता है, जैसे कि चौड़ाई, रंग वह कंप्यूट किया गया मान होगा, जब तक कि आप उसे खास तौर पर सेट नहीं करते.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

अपने बॉक्स के दोनों ओर बॉर्डर का रंग सेट करने के लिए, इस्तेमाल border-top-color border-right-color, border-left-color और border-bottom-color.

चौड़ाई

बॉर्डर की चौड़ाई यह है कि रेखा कितनी मोटी है और इसे border-width. बॉर्डर की डिफ़ॉल्ट चौड़ाई medium है. हालांकि, यह तब तक नहीं दिखेगा, जब तक कोई स्टाइल तय नहीं की जाती. thin और thick जैसी नाम वाली अन्य चौड़ाई इस्तेमाल की जा सकती हैं.

border-width प्रॉपर्टी, लंबाई की इकाई भी स्वीकार करती हैं, जैसे कि px, em, rem या %. अपने बॉक्स के हर तरफ़ बॉर्डर की चौड़ाई सेट करने के लिए, इसका इस्तेमाल करें border-top-width border-right-width, border-left-width और border-bottom-width.

लॉजिकल प्रॉपर्टी

इस लॉजिकल प्रॉपर्टी मॉड्यूल से पता चलता है कि फ़्लो और इनलाइन फ़्लो को ब्लॉक कैसे किया जाता है, की जगह साफ़ तौर पर दिखेगी.

आपके पास बॉर्डर की यह क्षमता भी है:

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

इस उदाहरण में, .my-element के सभी पक्षों को 2px के तौर पर परिभाषित किया गया है, बिंदु वाला बॉर्डर जो कि टेक्स्ट का मौजूदा रंग है. इसके बाद, inline-end बॉर्डर 2px रंग में बदल जाता है. यह सॉलिड और लाल रंग का बॉर्डर होता है. इसका मतलब है कि बाएं से दाएं की जाने वाली भाषाओं, जैसे कि अंग्रेज़ी में लाल बॉर्डर बॉक्स की दाईं ओर होगा. दाईं से बाईं ओर लिखी जाने वाली भाषाओं में—जैसे, ऐरेबिक— लाल बॉर्डर बॉक्स की बाईं ओर होगा.

ब्राउज़र, बॉर्डर में मौजूद लॉजिकल प्रॉपर्टी के लिए अलग-अलग तरह से काम करते हैं, इसलिए, इस्तेमाल करने से पहले यह पक्का कर लें कि सहायता उपलब्ध है.

बॉर्डर की रेडियस

बॉक्स के किनारों को गोल आकार में दिखाने के लिए, border-radius प्रॉपर्टी.

.my-element {
    border-radius: 1em;
}

यह शॉर्टहैंड, आपके बॉक्स के हर कोने में एक जैसा बॉर्डर जोड़ता है. अन्य बॉर्डर प्रॉपर्टी की तरह, आप इससे प्रत्येक साइड के लिए बॉर्डर त्रिज्या को इसके साथ परिभाषित कर सकते हैं border-top-left-radius border-top-right-radius, border-bottom-right-radius और border-bottom-left-radius.

शॉर्टहैंड में हर कोने का दायरा भी बताया जा सकता है, जो क्रम में आता है: सबसे ऊपर बाईं ओर, सबसे ऊपर दाईं ओर, सबसे नीचे दाईं ओर, फिर सबसे नीचे बाईं ओर.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

कोने के लिए एक वैल्यू तय करके, आप किसी अन्य शॉर्टहैंड का इस्तेमाल कर रहे हैं, क्योंकि बॉर्डर का दायरा दो भागों में बंटा हुआ है: ऊपर और नीचे की ओर स्क्रोल करें. इसका मतलब है कि जब border-top-left-radius: 1em को सेट किया जाता है, इनमें, सबसे ऊपर बाईं ओर ऊपर रेडियस और सबसे ऊपर बाएं बाएं रेडियस को सेट किया जा रहा है.

आप हर कोने में दोनों प्रॉपर्टी इस तरह से परिभाषित कर सकते हैं:

.my-element {
    border-top-left-radius: 1em 2em;
}

इससे 1em की border-top-left-top वैल्यू जुड़ जाएगी, और 2em का border-top-left-left मान है. यह ऊपरी बाएं बॉर्डर के रेडियस को अंडाकार रेडियस में बदल देता है, की जगह एक ही बार में दिखेगी.

इन वैल्यू को border-radius शॉर्टहैंड में परिभाषित किया जा सकता है, / का इस्तेमाल करके, स्टैंडर्ड वैल्यू के बाद अंडाकार वैल्यू तय करनी है. इसकी मदद से, अपनी क्रिएटिविटी को बढ़ाने के साथ-साथ कुछ जटिल आकार भी बनाए जा सकते हैं.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

बॉर्डर इमेज

आपको सीएसएस में सिर्फ़ स्ट्रोक-आधारित बॉर्डर का इस्तेमाल करने की ज़रूरत नहीं है. आपके पास किसी भी तरह की इमेज इस्तेमाल करने का विकल्प भी है. border-image. इस शॉर्टहैंड प्रॉपर्टी की मदद से सोर्स इमेज, इमेज को कैसे काटना है, इमेज की चौड़ाई, सीमा, किनारे से कितनी दूर है और इसे किस तरह दोहराया जाना चाहिए.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width प्रॉपर्टी border-width की तरह है: इस तरह से आप अपने बॉर्डर इमेज की चौड़ाई को सेट कर सकते हैं. border-image-outset प्रॉपर्टी का इस्तेमाल करके, बॉर्डर इमेज और उसके चारों तरफ़ मौजूद बॉक्स के बीच की दूरी सेट की जा सकती है.

border-image-source

border-image-source (बॉर्डर इमेज का सोर्स) किसी भी मान्य इमेज के लिए url हो सकता है. इसमें सीएसएस ग्रेडिएंट शामिल हैं.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice प्रॉपर्टी एक उपयोगी प्रॉपर्टी है, जिसकी मदद से आप किसी इमेज को चार हिस्सों में बांट सकते हैं, जिसमें चार अलग-अलग लाइनें होती हैं. यह margin शॉर्टहैंड की तरह काम करता है, जहां टॉप, राइट, बॉटम, और लेफ़्ट ऑफ़सेट वैल्यू तय की जाती है.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

ऑफ़सेट वैल्यू तय करने के बाद, अब आपकी इमेज में नौ सेक्शन हैं: चार कोने, चार किनारे, और एक बीच का सेक्शन. कोने, बॉर्डर इमेज वाले एलिमेंट के कोनों पर लगाए जाते हैं. किनारे उस एलिमेंट के किनारों पर लगाए जाते हैं. border-image-repeat प्रॉपर्टी तय करती है कि वे किनारे किस तरह अपनी जगह को भरेंगे और border-image-width प्रॉपर्टी, स्लाइस के साइज़ को कंट्रोल करती है.

आखिर में, fill कीवर्ड यह तय करता है कि स्लाइसिंग के बाद बीच वाले सेक्शन का इस्तेमाल, एलिमेंट के बैकग्राउंड इमेज के तौर पर किया जाएगा या नहीं.

border-image-repeat

border-image-repeat कि आप सीएसएस को कैसे निर्देश देते हैं कि आप अपने बॉर्डर इमेज को किस तरह दोहराना चाहते हैं. यह background-repeat की तरह ही काम करता है.

• शुरुआती वैल्यू stretch है. यह सुविधा, सोर्स इमेज को स्ट्रेच करती है, ताकि जहां मुमकिन हो.
• repeat वैल्यू, सोर्स इमेज के किनारों को जितनी बार हो सके उतनी बार टाइल करती है, साथ ही, ऐसा करने के लिए किनारों वाले हिस्सों को क्लिप किया जा सकता है.
• round की वैल्यू, रिपीट मोड के जैसी ही है, लेकिन इमेज के किनारे वाले हिस्सों को क्लिप करने के बजाय, कई बार फ़िट करने के लिए, यह इमेज को स्ट्रेच करने के साथ-साथ उसे दोहराता है, ताकि उसे बिना किसी रुकावट के दोहराया जा सके
• space वैल्यू दोबारा डाली गई है. लेकिन यह वैल्यू, हर किनारे वाले इलाके के बीच स्पेस जोड़ती है, ताकि आसान पैटर्न बनाया जा सके.

देखें कि आपको कितना समझ आया है

सीमाओं से जुड़ी अपनी जानकारी को परखें

.my-element {
  border: solid hotpink;
}