CSS Outline Offset – आउटलाइन को एलिमेंट से दूर या पास करने का तरीका

CSS Outline Offset प्रॉपर्टी का उपयोग outline और उसके संबंधित एलिमेंट के बॉर्डर बॉक्स के बीच की दूरी को सेट करने के लिए किया जाता है। यह प्रॉपर्टी आपके डिज़ाइन में outline को एलिमेंट से थोड़ा बाहर या अंदर दिखाने के लिए बहुत उपयोगी है।

इस अध्याय में, हम Outline Offset को विस्तार से समझेंगे, इसके उपयोग के तरीके, और इसके साथ कुछ उदाहरणों पर चर्चा करेंगे।

Outline Offset का परिचय

जब आप किसी HTML एलिमेंट पर outline का उपयोग करते हैं, तो डिफ़ॉल्ट रूप से आउटलाइन उस एलिमेंट के बॉर्डर से सटा हुआ होता है। Outline Offset प्रॉपर्टी आपको उस आउटलाइन को बॉर्डर से बाहर या अंदर खिसकाने की अनुमति देती है।

Syntax

outline-offset: length;

यहां:

length – आउटलाइन और बॉर्डर के बीच की दूरी को मापने का मान है। इसे पिक्सल (px), प्वाइंट (pt), ईएम (em), प्रतिशत (%), आदि में सेट किया जा सकता है।

Outline Offset के मुख्य बिंदु

Positive Values:
पॉज़िटिव वैल्यू देने पर आउटलाइन बॉर्डर से बाहर की ओर शिफ्ट हो जाती है।
Negative Values:
नेगेटिव वैल्यू देने पर आउटलाइन बॉर्डर के अंदर की ओर खिसकती है।
Default Value:
इसका डिफ़ॉल्ट मान 0 होता है, जिसका मतलब है कि आउटलाइन एलिमेंट के बॉर्डर से बिल्कुल सटी हुई है।

Example 1: Positive Outline Offset

button {
    outline: 2px solid blue;
    outline-offset: 10px;
}

यह कोड button एलिमेंट के चारों ओर एक 2px मोटी नीली आउटलाइन लगाएगा, लेकिन आउटलाइन button के बॉर्डर से 10px बाहर की ओर खिसक जाएगी।

Example 2: Negative Outline Offset

input {
    outline: 3px dashed red;
    outline-offset: -5px;
}

यह कोड input एलिमेंट के चारों ओर एक 3px मोटी लाल (red) dashed आउटलाइन लगाएगा। नेगेटिव outline-offset के कारण, आउटलाइन बॉर्डर के अंदर 5px तक खिसक जाएगी।

Example 3: Interactive Focus के साथ Outline Offset

a:focus {
    outline: 4px solid green;
    outline-offset: 8px;
}

यह कोड तब काम करेगा जब कोई उपयोगकर्ता लिंक (a) पर फोकस करेगा। यह 4px मोटी ग्रीन आउटलाइन लगाएगा और इसे लिंक के बॉर्डर से 8px बाहर खिसकाएगा।

Example 4: Outline Offset के साथ Complex Design

div {
    border: 2px solid black;
    outline: 5px dotted orange;
    outline-offset: 15px;
}

इस कोड में:

बॉर्डर 2px मोटी काली रेखा है।
आउटलाइन 5px मोटी नारंगी (orange) dotted रेखा है।
आउटलाइन बॉर्डर से 15px दूर शिफ्ट होगी।

Practical Use Cases of Outline Offset

Focus Highlighting:
जब आप किसी एलिमेंट को फोकस में लाना चाहते हैं, तो outline-offset उपयोगकर्ता का ध्यान खींचने के लिए उपयोग किया जा सकता है।
Better Accessibility:
कीबोर्ड-नेविगेशन और स्क्रीन रीडर उपयोगकर्ताओं के लिए, यह प्रॉपर्टी एलिमेंट्स को बेहतर तरीके से हाइलाइट करने में मदद करती है।
Aesthetic Design:
Outline Offset डिज़ाइन को अधिक आकर्षक और इंटरएक्टिव बनाता है। इससे एलिमेंट्स के बीच एक स्पष्ट दूरी दिखती है।

Outline Offset के फायदे

Customizable Look:
आप एलिमेंट्स और उनकी आउटलाइन के बीच का गैप कस्टमाइज़ कर सकते हैं। यह किसी एलिमेंट को अधिक विज़ुअल रूप से स्पष्ट और अलग करने में मदद करता है।
Improves Readability:
जब आप पॉज़िटिव outline-offset का उपयोग करते हैं, तो एलिमेंट की मुख्य सामग्री और उसकी आउटलाइन के बीच पर्याप्त जगह होती है, जिससे डिज़ाइन और पढ़ने की क्षमता बेहतर होती है।
Interactive Feedback:
यह उपयोगकर्ता के इंटरैक्शन पर अधिक स्पष्टता प्रदान करता है, जैसे बटन पर क्लिक करने या फोकस करने पर।

Outline Offset से जुड़ी महत्वपूर्ण बातें

Accessibility का ध्यान रखें:
outline-offset का उपयोग करते समय, सुनिश्चित करें कि आपके आउटलाइन का रंग और आकार उपयोगकर्ताओं के लिए स्पष्ट और पठनीय है।
High Contrast Colors:
जब आप outline-offset का उपयोग करते हैं, तो आउटलाइन के रंगों को बैकग्राउंड और बॉर्डर से अलग और स्पष्ट रखें।
Avoid Overlap:
नेगेटिव वैल्यू का उपयोग करते समय सावधानी बरतें। अत्यधिक नेगेटिव outline-offset आउटलाइन को मुख्य कंटेंट के ऊपर ओवरलैप कर सकता है, जिससे डिज़ाइन गड़बड़ दिख सकता है।

Example with Keyframes Animation

आप outline-offset का उपयोग एनिमेशन में भी कर सकते हैं।

button {
    outline: 2px solid blue;
    outline-offset: 0px;
    transition: outline-offset 0.5s ease-in-out;
}

button:hover {
    outline-offset: 10px;
}

यह कोड आउटलाइन को एक आकर्षक एनिमेशन देगा। जब कोई उपयोगकर्ता बटन पर माउस ले जाएगा, तो आउटलाइन धीरे-धीरे 10px बाहर खिसक जाएगी।

Conclusion

CSS Outline Offset प्रॉपर्टी एक प्रभावशाली टूल है, जो आपके डिज़ाइन में आउटलाइन को बॉर्डर से अंदर या बाहर खिसकाने की अनुमति देती है। यह प्रॉपर्टी आपके UI/UX डिज़ाइन को अधिक इंटरएक्टिव और आकर्षक बनाती है। इसका उपयोग विशेष रूप से focus states और डिज़ाइन में अंतराल दिखाने के लिए किया जाता है।