CSS Outline Offset

CSS Outline Offset பற்றி கற்றுக்கொள்ளுங்கள்

CSS Outline Offset

outline-offset பண்பு ஒரு outline மற்றும் ஒரு உறுப்பின் விளிம்பு/border க்கு இடையே ஒரு இடத்தை சேர்க்கிறது. ஒரு உறுப்புக்கும் அதன் outline-க்கும் இடையே உள்ள இடம் வெளிப்படையானது.

📐 offset என்றால் என்ன?

Offset என்பது ஒரு உறுப்பிலிருந்து ஒரு குறிப்பிட்ட தூரத்திற்கு நகர்த்துவது அல்லது மாற்றுவது. outline-offset-ல், இது outline-ஐ உறுப்பிலிருந்து வெகு தொலைவில் நகர்த்துகிறது.

நேர்மறை Outline Offset

பின்வரும் எடுத்துக்காட்டு border விளிம்பிலிருந்து 15px வெளியே ஒரு outline-ஐ குறிப்பிடுகிறது:

15px outline-offset

இந்தப் பத்திக்கு ஒரு கருப்பு border மற்றும் border விளிம்பிலிருந்து 15px வெளியே ஒரு சிவப்பு outline உள்ளது.

p { margin: 30px; padding: 5px; border: 1px solid black; outline: 3px solid red; outline-offset: 15px; }

Outline Offset விஷுவலைசேஷன்

Content Area
Content
Border
Offset Space (15px)
Outline

கவனிக்க: outline மற்றும் border க்கு இடையே உள்ள இடம் வெளிப்படையானது (transparent). இங்கே நீல நிறம் புரிந்துகொள்வதற்காக மட்டுமே.

வெளிப்படையான இடம்

பின்வரும் எடுத்துக்காட்டு ஒரு உறுப்பின் border மற்றும் அதன் outline க்கு இடையே உள்ள இடம் வெளிப்படையானது என்பதைக் காட்டுகிறது:

வெளிப்படையான offset இடம்

இந்தப் பத்திக்கு border விளிம்பிலிருந்து 15px வெளியே ஒரு outline உள்ளது.

p { margin: 30px; padding: 5px; background: yellow; border: 1px solid black; outline: 3px solid red; outline-offset: 15px; }

🔍 முக்கிய குறிப்பு:

outline-offset உருவாக்கிய இடம் எப்போதும் வெளிப்படையானது. இது பின்னணி நிறத்தை காட்டாது. மேலே உள்ள எடுத்துக்காட்டில், outline மற்றும் border க்கு இடையே உள்ள இடத்தில் மஞ்சள் பின்னணி தெரியவில்லை.

எதிர்மறை மதிப்புடன் CSS Outline Offset

பின்வரும் எடுத்துக்காட்டு எதிர்மறை மதிப்புடன் ஒரு outline-offset-ன் பயன்பாட்டைக் காட்டுகிறது, இப்போது outline border விளிம்புக்குள் வைக்கப்படும்:

-5px outline-offset (உள்ளே)

இந்தப் பத்திக்கு ஒரு கருப்பு border மற்றும் border விளிம்புக்குள் -5px ஒரு சிவப்பு outline உள்ளது.

p { margin: 30px; padding: 5px; background: yellow; border: 1px solid black; outline: 3px solid red; outline-offset: -5px; }

⚠️ எதிர்மறை offset-ன் விளைவு:

எதிர்மறை outline-offset மதிப்பு outline-ஐ உறுப்புக்குள் நகர்த்துகிறது. இது outline border-க்கு உள்ளே தோன்றும். outline இன்னும் உறுப்பின் பரிமாணங்களை பாதிக்காது என்பதை நினைவில் கொள்ளுங்கள்.

Outline Offset மதிப்புகள்

outline-offset பின்வரும் மதிப்புகளை ஏற்கலாம்:

நேர்மறை மதிப்புகள்

Outline-ஐ border-க்கு வெளியே நகர்த்துகிறது

outline-offset: 10px;

எதிர்மறை மதிப்புகள்

Outline-ஐ border-க்கு உள்ளே நகர்த்துகிறது

outline-offset: -5px;

பூஜ்யம் (0)

Outline border-ன் விளிம்பில் இருக்கும்

outline-offset: 0;

📏 அளவீட்டு அலகுகள்:

outline-offset பின்வரும் அலகுகளை ஏற்கும்: px, em, rem, pt, cm, mm. சதவீத மதிப்புகள் (%) ஏற்கப்படாது.

CSS Outline Offset பயிற்சி

Jassif Team இல், உங்கள் அறிவை சோதிக்க பயிற்சிகள் உள்ளன. கீழே உள்ள பயிற்சியை முயற்சிக்கவும்:

❓ outline-offset பண்பு என்ன செய்கிறது?

Sets the thickness of the outline
✗ தவறு! outline-ன் தடிமன் outline-width பண்பு மூலம் அமைக்கப்படுகிறது
Adds space between the outline and the edge/border of an element
✓ சரி! outline-offset பண்பு ஒரு outline மற்றும் ஒரு உறுப்பின் விளிம்பு/border க்கு இடையே இடத்தை சேர்க்கிறது
Specifies the color of the outline
✗ தவறு! outline-ன் நிறம் outline-color பண்பு மூலம் குறிப்பிடப்படுகிறது

💡 outline-offset-ன் தனித்துவமான அம்சம்:

outline-offset என்பது outline-க்கு மட்டுமே உள்ள தனித்துவமான பண்பு. border-க்கு இதுபோன்ற offset பண்பு இல்லை. outline மட்டுமே border-லிருந்து தொலைவில் நகர்த்தப்பட முடியும்.

அனைத்து CSS Outline பண்புகள்

பண்பு விளக்கம்
outline outline-width, outline-style, மற்றும் outline-color ஆகியவற்றை ஒரே அறிவிப்பில் அமைக்க ஒரு சுருக்கப் பண்பு
outline-color ஒரு outline-ன் நிறத்தை அமைக்கிறது
outline-offset ஒரு outline மற்றும் ஒரு உறுப்பின் விளிம்பு அல்லது border க்கு இடையே உள்ள இடத்தை குறிப்பிடுகிறது
outline-style ஒரு outline-ன் பாணியை அமைக்கிறது
outline-width ஒரு outline-ன் அகலத்தை அமைக்கிறது

📚 Outline பண்புகளின் தொகுப்பு:

CSS outline பண்புகள் ஒன்றாக வேலை செய்கின்றன. பொதுவாக outline-style அமைக்கப்பட்ட பிறகே outline-width, outline-color, மற்றும் outline-offset வேலை செய்யும்.

நடைமுறை பயன்பாடுகள்

முக்கியமான உறுப்புகளை முன்னிலைப்படுத்த outline-offset பயன்படுத்தவும்
உறுப்புகளுக்கு இடையே தெளிவான பிரிப்புக்காக outline-offset பயன்படுத்தவும்
சிறப்பு விளைவுகளுக்காக எதிர்மறை offset மதிப்புகளைப் பயன்படுத்தவும்
மிக அதிகமான outline-offset மதிப்புகளைத் தவிர்க்கவும் - அவை பக்க தோற்றத்தை கெடுக்கலாம்
அணுகல் தன்மைக்காக, :focus நிலையில் உள்ள உறுப்புகளுக்கு outline-offset பயன்படுத்தவும்

நடைமுறை எடுத்துக்காட்டு: Focus நிலை

/* Input புலங்களுக்கான அணுகல் தன்மை */
input:focus {
  outline: 3px solid #3498db;
  outline-offset: 2px;
}

/* பொத்தான்களுக்கான சிறப்பு விளைவு */
button:hover {
  outline: 2px solid #e74c3c;
  outline-offset: 3px;
  transition: outline-offset 0.3s ease;
}

/* எதிர்மறை offset-ன் பயன்பாடு */
.special-box {
  border: 2px solid #333;
  outline: 3px solid #2ecc71;
  outline-offset: -8px;
  padding: 20px;
}

உலாவி ஆதரவு

CSS outline-offset பண்பு பெரும்பாலான நவீன உலாவிகளால் ஆதரிக்கப்படுகிறது:

உலாவி ஆதரவு குறிப்புகள்
Chrome ✓ 4.0+ முழு ஆதரவு
Firefox ✓ 3.5+ முழு ஆதரவு
Safari ✓ 3.1+ முழு ஆதரவு
Edge ✓ 12+ முழு ஆதரவு
IE ✗ ஆதரவு இல்லை IE ஆதரிக்காது

⚠️ IE ஆதரவு:

Internet Explorer outline-offset பண்பை ஆதரிக்காது. IE-க்கான பின்னோக்கு இணக்கத்திற்கு, வேறு மாற்று முறைகளைப் பயன்படுத்த வேண்டும்.