CSS Text Shadow

text-shadow பண்பு உரைக்கு நிழலைச் சேர்க்கிறது.

அதன் எளிமையான பயன்பாட்டில், நீங்கள் கிடைமட்ட மற்றும் செங்குத்து நிழலை மட்டுமே குறிப்பிடுகிறீர்கள்.

கூடுதலாக, நீங்கள் ஒரு நிழல் நிறம் மற்றும் தெளிவின்மை விளைவையும் சேர்க்கலாம்.

கிடைமட்ட மற்றும் செங்குத்து நிழல்:

h1 {
  text-shadow: 2px 2px;
}

அடுத்து, நிழலுக்கு ஒரு நிறத்தை (சிவப்பு) சேர்க்கவும்:

கிடைமட்ட மற்றும் செங்குத்து நிழல், நிறத்துடன்:

h1 {
  text-shadow: 2px 2px red;
}

பின்னர், நிழலுக்கு ஒரு தெளிவின்மை விளைவை (5px) சேர்க்கவும்:

கிடைமட்ட மற்றும் செங்குத்து நிழல், நிறம் மற்றும் தெளிவின்மை விளைவுடன்:

h1 {
  text-shadow: 2px 2px 5px red;
}

மேலும் Text Shadow எடுத்துக்காட்டுகள்

வெள்ளை உரையில் Text-shadow:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

சிவப்பு நியான் பிரகாசத்துடன் Text-shadow:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

text-shadow பண்பு ஒரு உறுப்புக்கு பல நிழல்களையும் ஏற்கிறது. ஒவ்வொரு நிழலையும் கமா பிரிக்கப்பட்ட பட்டியலில் வரையறுக்கவும்.

பின்வரும் எடுத்துக்காட்டு சிவப்பு மற்றும் நீல நியான் பிரகாச நிழலைக் காட்டுகிறது:

சிவப்பு மற்றும் நீல நியான் பிரகாசத்துடன் Text-shadow:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

பின்வரும் எடுத்துக்காட்டு கருப்பு, நீலம் மற்றும் சிவப்பு நியான் பிரகாசத்துடன் வெள்ளை உரையைக் காட்டுகிறது:

கருப்பு, நீலம் மற்றும் சிவப்பு நியான் பிரகாசத்துடன் Text-shadow:

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}

எழுத்துருக்களை எவ்வாறு மாற்றுவது, உரை அளவு மற்றும் ஒரு உரையின் பாணி என்பதை அறிய எங்கள் CSS Fonts அத்தியாயத்திற்குச் செல்லவும்.

வெவ்வேறு உரை விளைவுகளைப் பற்றி அறிய எங்கள் CSS Text Effects அத்தியாயத்திற்குச் செல்லவும்.

இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.

h1 {
  : 2px 2px ;
}

shadow: red

✗ தவறு!

text-shadow: red

✓ சரி!

box-shadow: red

✗ தவறு!

font-shadow: red

✗ தவறு!

பண்பு	விளக்கம்
text-shadow	உரைக்கு சேர்க்கப்பட்ட நிழல் விளைவை குறிப்பிடுகிறது