CSS Outline: एलिमेंट्स के चारों ओर आउटलाइन बनाने का गाइड

CSS Outline क्या है?

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

यहीं पर CSS outline प्रॉपर्टी काम आती है। outline प्रॉपर्टी आपको एलिमेंट के बॉर्डर्स के बाहर एक लाइन जोड़ने की अनुमति देती है ताकि एलिमेंट वेब पेज पर अलग दिखे।

आउटलाइन और बॉर्डर में अंतर

CSS में बॉर्डर और आउटलाइन में कुछ अंतर हैं।

1. पोजिशन: आउटलाइन एलिमेंट के बाहर खींची जाती है (बॉर्डर के विपरीत)। इसका मतलब है कि हमारे द्वारा घोषित आउटलाइन वेब पेज पर अन्य कंटेंट के साथ ओवरलैप हो सकती है। हालांकि, आउटलाइन्स कोई स्पेस नहीं लेतीं, और इसलिए ओवरलैप करने में सक्षम होने के अलावा आसपास के एलिमेंट्स पर कोई प्रभाव नहीं पड़ता।
2. डाइमेंशन्स: आउटलाइन एलिमेंट के डाइमेंशन्स का हिस्सा नहीं है। इसका मतलब है कि आपके द्वारा निर्दिष्ट आउटलाइन का एलिमेंट की ऊंचाई और चौड़ाई वैल्यूज़ पर कोई प्रभाव नहीं पड़ेगा।
3. यूनिफॉर्म स्टाइल: बॉर्डर्स के विपरीत, आउटलाइन्स प्रत्येक एज के लिए अलग बॉर्डर विड्थ, कलर, या स्टाइल नहीं रख सकतीं। इसलिए, आपके द्वारा एलिमेंट के चारों ओर निर्दिष्ट आउटलाइन सभी एजेज पर सुसंगत दिखाई देगी।

यह ग्राफिक दर्शाता है कि आउटलाइन्स वेब एलिमेंट के कंटेंट और बॉर्डर दोनों के बाहर कैसे लागू होती हैं। आप देख सकते हैं कि आउटलाइन वेब एलिमेंट की सबसे बाहरी लेयर है।

यदि आप CSS में बॉर्डर्स के बारे में अधिक जानना चाहते हैं, तो CSS बॉर्डर्स के लिए हमारे गाइड को पढ़ें।

CSS Outline प्रॉपर्टी

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

outline प्रॉपर्टी चार सब-प्रॉपर्टीज़ का शॉर्टहैंड है जो आपको यह कस्टमाइज़ करने की अनुमति देती हैं कि आउटलाइन वेब पेज पर कैसे दिखाई देती है। ये सब-प्रॉपर्टीज़ हैं:

• outline-color: आउटलाइन का रंग सेट करता है
• outline-style: आउटलाइन की स्टाइल सेट करता है
• outline-width: आउटलाइन की चौड़ाई सेट करता है

सिंटैक्स

outline: outline-color outline-style outline-width;

outline प्रॉपर्टी के साथ निर्दिष्ट वैल्यूज़ को किसी विशेष क्रम में प्रकट होने की आवश्यकता नहीं है।

उदाहरण: बेसिक आउटलाइन

मान लीजिए हम This is a box टेक्स्ट वाले बॉक्स के चारों ओर एक आउटलाइन बनाना चाहते हैं। हमारी आउटलाइन में निम्न विशेषताएं होनी चाहिए:

• आउटलाइन लाल होनी चाहिए।
• आउटलाइन 3px मोटी होनी चाहिए।
• आउटलाइन डॉटेड होनी चाहिए।

हम यह भी चाहते हैं कि हमारी आउटलाइन में 1px मोटा काला बॉर्डर हो। हम निम्न कोड का उपयोग करके यह आउटलाइन और बॉर्डर बना सकते हैं:

<html>
  <p class="outlineExample">This is a box.</p>
</html>
<style>
  .outlineExample { 
    width: 100px; 
    border: black solid 1px; 
    outline: red dotted 3px; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे कोड में, हमने एक आउटलाइन घोषित की, जो लाल रंग में दिखाई देती है, और एक बॉर्डर, जो काले रंग में दिखाई देता है। बॉर्डर 1px मोटा है और सॉलिड स्टाइल में दिखाई देता है, और आउटलाइन लाल, 3px मोटी, और डॉटेड स्टाइल में दिखाई देती है। हमने अपने बॉक्स की चौड़ाई 100px पर भी सेट की।

जैसा कि आप देख सकते हैं, आउटलाइन हमारे वेब एलिमेंट में बॉर्डर के बाहर दिखाई देती है।

CSS Outline सब-प्रॉपर्टीज़

जैसा कि हमने पहले चर्चा की, CSS outline प्रॉपर्टी तीन सब-प्रॉपर्टीज़ का शॉर्टहैंड है। आइए इनमें से प्रत्येक सब-प्रॉपर्टी को व्यक्तिगत रूप से देखें ताकि यह समझाया जा सके कि वे कैसे काम करती हैं।

1. CSS Outline Width (outline-width)

outline-width प्रॉपर्टी वेब एलिमेंट पर लागू आउटलाइन की चौड़ाई निर्दिष्ट करती है।

outline-width प्रॉपर्टी निम्न लेंथ वैल्यूज़ में से किसी को स्वीकार करती है:

• thin (डिफ़ॉल्ट रूप से, 1px)
• medium (डिफ़ॉल्ट रूप से, 3px)
• thick (डिफ़ॉल्ट रूप से, 5px)
• px, pt, cm, em, rem, या अन्य CSS लेंथ मीट्रिक में निर्दिष्ट आकार

उदाहरण: Medium Width Outline

मान लीजिए हम 3px (medium) नीले, सॉलिड आउटलाइन वाला बॉक्स डिज़ाइन करना चाहते हैं। हम यह भी चाहते हैं कि हमारे बॉक्स में 1px चौड़ा सॉलिड, काला बॉर्डर हो। हम निम्न कोड का उपयोग करके यह बॉक्स बना सकते हैं:

<html>
  <p class="outlineExample">This is a box.</p>
</html>
<style>
  .outlineExample { 
    width: 100px; 
    border: black solid 1px; 
    outline-style: solid; 
    outline-color: red; 
    outline-width: medium; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

आइए इस उदाहरण को तोड़कर देखें। हमारे CSS कोड में, हमने अपने बॉक्स की चौड़ाई 100px पर सेट की और हमारे बॉक्स के चारों ओर 1px चौड़ा सॉलिड काला बॉर्डर परिभाषित किया।

फिर, हमने अपने बॉर्डर को परिभाषित करने के लिए तीन सब-प्रॉपर्टीज़ का उपयोग किया।

• outline-style प्रॉपर्टी का उपयोग हमारे आउटलाइन की स्टाइल सेट करने के लिए किया जाता है, जो इस मामले में सॉलिड है।
• outline-color प्रॉपर्टी का उपयोग हमारे आउटलाइन का रंग सेट करने के लिए किया जाता है, जो इस उदाहरण में लाल है। (हम outline-style और outline-color सब-प्रॉपर्टीज़ पर इस गाइड में बाद में अधिक गहराई से चर्चा करते हैं)।
• outline-width प्रॉपर्टी का उपयोग हमारे आउटलाइन की चौड़ाई सेट करने के लिए किया जाता है, जिसे हमने medium पर सेट किया (जो डिफ़ॉल्ट रूप से 3px है)।

जैसा कि आप देख सकते हैं, हमारे बॉक्स में 3px चौड़ी लाल आउटलाइन है।

2. CSS Outline Color (outline-color)

outline-color प्रॉपर्टी आपको किसी विशेष वेब एलिमेंट को असाइन की गई आउटलाइन का रंग सेट करने की अनुमति देती है। यह प्रॉपर्टी निम्न CSS कलर टाइप्स में से किसी को स्वीकार करती है:

• name: एक रंग नाम, जैसे blue या pink
• hex: एक हेक्साडेसिमल कलर, जैसे #f7f7f7
• rgb: एक RGB वैल्यू, जैसे rgb(102, 211, 56)
• invert: यह आउटलाइन के रंग को इनवर्ट करता है
• hsl: एक HSL वैल्यू, जैसे hsl(0, 25%, 50%)

उदाहरण: ब्लू आउटलाइन

मान लीजिए हम एक बॉक्स के चारों ओर एक आउटलाइन डिज़ाइन करना चाहते हैं जो हमारे बॉक्स के चारों ओर नीले रंग में दिखाई दे। हमारी आउटलाइन 3px मोटी होनी चाहिए और सॉलिड स्टाइल का उपयोग करना चाहिए। हम निम्न कोड का उपयोग करके इस आउटलाइन वाला बॉक्स बना सकते हैं:

<html>
  <p class="outlineExample">This is a box.</p>
<html>
<style>
  .outlineExample { 
    width: 100px; 
    border: black solid 1px; 
    outline-style: solid; 
    outline-color: blue; 
    outline-width: medium; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

इस उदाहरण में, हमने अपने आउटलाइन का रंग नीला सेट करने के लिए आउटलाइन कलर प्रॉपर्टी का उपयोग किया। हमने अपने आउटलाइन की स्टाइल को सॉलिड पर सेट करने के लिए outline-style प्रॉपर्टी का भी उपयोग किया, और हमारे आउटलाइन की चौड़ाई की स्टाइल को 3px (या medium) पर सेट करने के लिए outline-width प्रॉपर्टी का उपयोग किया।

हमारे कोड में, हमने अपने बॉक्स को 100px चौड़ा भी बनाया, और हमारे बॉक्स के चारों ओर 1px सॉलिड काला बॉर्डर सेट किया, जिससे हमारी आउटलाइन देखना आसान हो जाता है।

3. CSS Outline Style (outline-style)

outline-style प्रॉपर्टी आपको अपने आउटलाइन की स्टाइल सेट करने की अनुमति देती है।

यह प्रॉपर्टी निम्न वैल्यूज़ स्वीकार करती है:

• dotted
• dashed
• groove
• ridge
• solid
• double
• inset
• outset
• none
• hidden

इसलिए, ridge वैल्यू रिज आउटलाइन बनाती है, inset वैल्यू इनसेट आउटलाइन बनाती है, groove वैल्यू ग्रूव आउटलाइन बनाती है, और इसी तरह। यह दिखाने के लिए कि ये आउटलाइन्स कैसी दिखाई देती हैं, आइए एक बॉक्स बनाएं जिसमें आउटलाइन हो और बॉक्स पर व्यक्तिगत रूप से इनमें से प्रत्येक आउटलाइन स्टाइल लागू करें। यहां हमारे बॉक्स के लिए बेसिक कोड है:

<html>
  <p class="outlineExample">This is a box.</p>
<html>
<style>
  .outlineExample { 
    width: 300px; 
    border: black solid 1px; 
    outline-color: blue; 
    outline-width: medium; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

यह कोड एक बॉक्स बनाता है जिसमें नीली आउटलाइन है जो 3px चौड़ी है (medium वैल्यू का उपयोग करके आउटलाइन की चौड़ाई दर्शाने के लिए)। बॉक्स में 1px चौड़ा काला सॉलिड बॉर्डर है, और बॉक्स 200px चौड़ा है।

हमारे बॉक्स की स्टाइल सेट करने के लिए, हमें outline-style प्रॉपर्टी का उपयोग करना चाहिए। इसलिए, यदि हम double आउटलाइन स्टाइल वाला बॉक्स चाहते हैं, तो हम इस CSS स्टाइल का उपयोग कर सकते हैं:

<style> 
  .outlineExample { outline-style: dotted; } 
</style>

यहां एक ग्राफिक है जो outline-style प्रॉपर्टी के साथ outline-style द्वारा स्वीकार की जाने वाली सभी संभावित वैल्यूज़ के उपयोग के परिणाम दिखाता है:

CSS Outline Offset

outline-offset प्रॉपर्टी आउटलाइन और एलिमेंट के बॉर्डर के बीच स्पेस जोड़ती है।

outline-offset प्रॉपर्टी द्वारा परिभाषित एलिमेंट की आउटलाइन और बॉर्डर के बीच का स्पेस ट्रांसपेरेंट होता है। इसके अलावा, outline-offset प्रॉपर्टी स्टैंडअलोन है, और outline शॉर्टहैंड में उपयोग नहीं की जा सकती।

उदाहरण: आउटलाइन ऑफसेट के साथ बॉक्स

मान लीजिए हम 1px चौड़े सॉलिड काले बॉर्डर और 2px चौड़े सॉलिड लाल आउटलाइन वाला बॉक्स डिज़ाइन करना चाहते हैं। आउटलाइन को हमारे बॉर्डर के एज से 10px बाहर ऑफसेट किया जाना चाहिए। हम निम्न कोड का उपयोग करके इन स्टाइल्स वाला बॉक्स बना सकते हैं:

<html>
  <p class="outlineExample">This is a box.</p>
<html>
<style>
  .outlineExample { 
    width: 200px; 
    border: black solid 1px; 
    outline: red 2px solid; 
    outline-offset: 10px; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

इस उदाहरण में, हमने एक बॉक्स परिभाषित किया जो 200px चौड़ा है, जिसमें 1px चौड़ा सॉलिड काला बॉर्डर है, और 2px चौड़ी लाल सॉलिड आउटलाइन है। हमारे बॉक्स के लिए आउटलाइन 10px से ऑफसेट है, जिसका अर्थ है कि प्रत्येक बॉर्डर एज और आउटलाइन के बीच 10px गैप है।

निष्कर्ष

CSS outline प्रॉपर्टी का उपयोग वेब एलिमेंट के बॉर्डर्स के चारों ओर आउटलाइन्स को परिभाषित करने के लिए किया जाता है।

outline प्रॉपर्टी कस्टम आउटलाइन्स बनाने के लिए उपयोग की जाने वाली तीन सब-प्रॉपर्टीज़ का शॉर्टहैंड है: outline-color, outline-width, और outline-style। इसके अलावा, outline-offset प्रॉपर्टी का उपयोग आउटलाइन और एलिमेंट के बॉर्डर के बीच स्पेस जोड़ने के लिए किया जाता है।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में, CSS में आउटलाइन्स की बुनियादी बातों, आउटलाइन प्रॉपर्टी और इसकी सब-प्रॉपर्टीज़ का उपयोग कैसे करें, और आउटलाइन-ऑफसेट प्रॉपर्टी का उपयोग कैसे करें, इस पर चर्चा की गई। अब आप एक CSS प्रो की तरह आउटलाइन्स डिज़ाइन करना शुरू करने के लिए ज्ञान से लैस हैं!