CSS Shadow Effects

Norway
Shadows

CSS உடன் நீங்கள் நிழல் விளைவுகளை உருவாக்கலாம்!

Hover over me!

CSS Text Shadow

CSS text-shadow பண்பு உரைக்கு ஒரு நிழலைப் பயன்படுத்துகிறது.

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

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

Text shadow effect!

எடுத்துக்காட்டு

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

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

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

Text shadow effect!

எடுத்துக்காட்டு

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

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

பின்னர், நிழலுக்கு ஒரு பிளர் விளைவைச் சேர்க்கவும்:

Text shadow effect!

எடுத்துக்காட்டு

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

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

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

Text shadow effect!

எடுத்துக்காட்டு

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

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

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

Text shadow effect!

எடுத்துக்காட்டு

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

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

Multiple Shadows

உரைக்கு ஒன்றுக்கு மேற்பட்ட நிழலைச் சேர்க்க, நீங்கள் காற்புள்ளியால் பிரிக்கப்பட்ட நிழல்களின் பட்டியலைச் சேர்க்கலாம்.

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

Text shadow effect!

எடுத்துக்காட்டு

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

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

Text shadow effect!

எடுத்துக்காட்டு

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

நீங்கள் text-shadow பண்பை சில உரையைச் சுற்றி ஒரு எளிய எல்லையை உருவாக்கவும் பயன்படுத்தலாம் (நிழல்கள் இல்லாமல்):

Border around text!

எடுத்துக்காட்டு

h1 {
    color: coral;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}