CSS Outline Color

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

CSS Outline Color

outline-color பண்பு outline-ன் நிறத்தை அமைக்க பயன்படுகிறது.

நிறத்தை பின்வரும் முறைகளில் அமைக்கலாம்:

நிறம் அமைக்கும் முறைகள்

பெயர்

"red" போன்ற நிறப் பெயரைக் குறிப்பிடவும்

outline-color: red;

HEX

"#ff0000" போன்ற hex மதிப்பைக் குறிப்பிடவும்

outline-color: #ff0000;

RGB

"rgb(255,0,0)" போன்ற RGB மதிப்பைக் குறிப்பிடவும்

outline-color: rgb(255, 0, 0);

HSL

"hsl(0, 100%, 50%)" போன்ற HSL மதிப்பைக் குறிப்பிடவும்

outline-color: hsl(0, 100%, 50%);

invert

நிறத் தலைகீழாக்கத்தைச் செய்கிறது (பின்னணி நிறத்தைப் பொருட்படுத்தாமல் outline தெரியும் என்பதை உறுதி செய்கிறது)

outline-color: invert;

🎨 invert மதிப்பு:

invert மதிப்பு outline-ன் நிறத்தை பின்னணி நிறத்தின் நேர்மாறாக மாற்றுகிறது. இது outline எப்போதும் தெரியும் என்பதை உறுதி செய்கிறது.

CSS Outline Color எடுத்துக்காட்டுகள்

வெவ்வேறு நிறங்களைக் கொண்ட சில outlines-கள். இந்த உறுப்புகளுக்கு outline-க்குள் ஒரு மெல்லிய கருப்பு border உள்ளது என்பதையும் கவனிக்கவும்:

solid red outline

ஒரு திடமான சிவப்பு outline.

outline-style: solid;
outline-color: red;
dotted blue outline

ஒரு புள்ளியிட்ட நீல outline.

outline-style: dotted;
outline-color: blue;
outset green outline

ஒரு outset பச்சை outline.

outline-style: outset;
outline-color: green;
solid invert outline

ஒரு திடமான invert outline.

outline-style: solid;
outline-color: invert;

விரிவான எடுத்துக்காட்டு

வெவ்வேறு outline நிறங்களை நிரூபிக்கும் எடுத்துக்காட்டு:

HTML:

<p class="ex1">Solid red outline</p>
<p class="ex2">Dotted blue outline</p>
<p class="ex3">Outset green outline</p>
<p class="ex4">Solid invert outline</p>

CSS:

/* அடிப்படை பாணிகள் */
p {
  border: 1px solid black;
  padding: 10px;
  margin: 15px 0;
  background: #f8f8f8;
}

/* வெவ்வேறு outline நிறங்கள் */
p.ex1 {
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  outline-style: outset;
  outline-color: green;
}

p.ex4 {
  outline-style: solid;
  outline-color: invert;
}

நிற மதிப்பு எடுத்துக்காட்டுகள்

HEX மதிப்புகள்

Outline நிறத்தை hexadecimal மதிப்புகளைப் பயன்படுத்தியும் குறிப்பிடலாம்:

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* சிவப்பு */
}

p.ex2 {
  outline-style: solid;
  outline-color: #0000ff; /* நீலம் */
}

p.ex3 {
  outline-style: solid;
  outline-color: #00ff00; /* பச்சை */
}

RGB மதிப்புகள்

அல்லது RGB மதிப்புகளைப் பயன்படுத்தலாம்:

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* சிவப்பு */
}

p.ex2 {
  outline-style: solid;
  outline-color: rgb(0, 0, 255); /* நீலம் */
}

p.ex3 {
  outline-style: solid;
  outline-color: rgb(0, 255, 0); /* பச்சை */
}

HSL மதிப்புகள்

நீங்கள் HSL மதிப்புகளையும் பயன்படுத்தலாம்:

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* சிவப்பு */
}

p.ex2 {
  outline-style: solid;
  outline-color: hsl(240, 100%, 50%); /* நீலம் */
}

p.ex3 {
  outline-style: solid;
  outline-color: hsl(120, 100%, 50%); /* பச்சை */
}

📚 கூடுதல் கற்றல்:

HEX, RGB மற்றும் HSL மதிப்புகளைப் பற்றி மேலும் அறிய Jassif Team-இன் CSS நிறங்கள் பிரிவைப் பார்க்கவும்.

CSS Outline Color பயிற்சி

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

❓ ஒரு உறுப்பின் outline-ன் நிறத்தை வரையறுக்க எந்த பண்பு பயன்படுத்தப்படுகிறது?

border-color
✗ தவறு! border-color என்பது border-ன் நிறத்தை வரையறுக்கிறது, outline-ன் நிறத்தை அல்ல
outline-color
✓ சரி! outline-color பண்பு ஒரு உறுப்பின் outline-ன் நிறத்தை வரையறுக்கப் பயன்படுகிறது
color
✗ தவறு! color பண்பு உறுப்பின் உரை நிறத்தை வரையறுக்கிறது, outline-ன் நிறத்தை அல்ல
outline-style
✗ தவறு! outline-style பண்பு outline-ன் பாணியை வரையறுக்கிறது (solid, dotted, முதலியன), நிறத்தை அல்ல

💡 CSS பண்புகளின் வேறுபாடு:

  • outline-color - outline-ன் நிறத்தை வரையறுக்கிறது
  • border-color - border-ன் நிறத்தை வரையறுக்கிறது
  • color - உரை நிறத்தை வரையறுக்கிறது
  • background-color - பின்னணி நிறத்தை வரையறுக்கிறது

உலாவி ஆதரவு

CSS outline-color பண்பு அனைத்து நவீன உலாவிகளாலும் முழுமையாக ஆதரிக்கப்படுகிறது:

உலாவி ஆதரவு குறிப்புகள்
Chrome ✓ 1.0+ முழு ஆதரவு
Firefox ✓ 1.5+ முழு ஆதரவு
Safari ✓ 1.2+ முழு ஆதரவு
Edge ✓ 12+ முழு ஆதரவு
IE ✓ 8+ invert மதிப்பு IE8 இல் ஆதரிக்கப்படவில்லை

outline-color-க்கான சிறந்த நடைமுறைகள்

அணுகல் தன்மைக்காக, :focus நிலையில் உள்ள உறுப்புகளுக்கு outline-color பயன்படுத்துங்கள்
பின்னணி நிறத்துடன் நல்ல contrast உள்ள outline நிறத்தைத் தேர்ந்தெடுக்கவும்
நிற நபர்களுக்கு பார்க்க எளிதாக இருக்க, நிற குழுக்களைப் பயன்படுத்தாத outline நிறங்களைத் தேர்ந்தெடுக்கவும்
மிகவும் வெளிர் நிற outlines-ஐ தவிர்க்கவும் - அவை பார்க்க கடினமாக இருக்கும்
மாறுபட்ட பின்னணி நிறங்கள் இருக்கும் போது, outline-color: invert; பயன்படுத்தவும்

🎯 invert-ன் நடைமுறை பயன்பாடு:

outline-color: invert; என்பது பல்வேறு பின்னணி நிறங்களைக் கொண்ட வலைத்தளங்களுக்கு பயனுள்ளதாக இருக்கும். இது outline எப்போதும் தெரியும் என்பதை உறுதி செய்கிறது.