CSS Shadow Effects

இந்த shadow effects-ஐ பயன்படுத்தி ஒரு text அல்லது ஒரு html element-க்கு shadow effects-ஐ உருவாக்கலாம்.

கீழே கொடுக்கப்பட்டுள்ள இரண்டு முறைகளில் shadow effect-ஐ உருவாக்கலாம்.

  • text-shadow
  • box-shadow

CSS Text Shadow

text-shadow property ஒரு text-க்கு shadow apply செய்ய பயன்படுத்தபடுகிறது.

Note: நம்மால் text shadow effect-ஐ horizontal மற்றும் vertical இவ்விரு வழிகளில் மட்டுமே apply செய்ய இயலும்.

Example

Try this code 
.shadow-default {
    text-shadow: 2px 2px;
    font-size:30px;
}

மேலே கொடுக்கப்பட்டுள்ள example-லில் முதலில் கொடுக்கப்பட்டுள்ள 2px-horizontal shadow மற்றும் அடுத்த 2px-vertical shadow ஆகும்.

Output:

It's never over

shadow effects-உடன் color-ஐயும் சேர்த்துகொள்ளலாம்.

Example

Try this code 
.shadow-with-color {
    text-shadow: 2px 2px red;
    font-size:30px;
}

மேலே கொடுக்கப்பட்டுள்ள example-லில் முதலில் கொடுக்கப்பட்டுள்ள 2px-horizontal shadow மற்றும் அடுத்த 2px-vertical shadow ஆகும்.

Output:

Work hard in silence

shadow effects-உடன் blur effect-ஐயும் சேர்த்துகொள்ளலாம்.

Example

Try this code 
.shadow-with-blur {
    text-shadow: 2px 2px 5px red;
    font-size:30px;
}

மேலே கொடுக்கப்பட்டுள்ள example-லில் முதலில் கொடுக்கப்பட்டுள்ள 2px-horizontal shadow மற்றும் அடுத்த 2px-vertical shadow ஆகும்.

Output:

Don't decrease the goal

The following example shows a white text with black shadow:

Example

Try this code 
.white-text {
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size:30px;
}

மேலே கொடுக்கப்பட்டுள்ள example-லில் முதலில் கொடுக்கப்பட்டுள்ள 2px-horizontal shadow மற்றும் அடுத்த 2px-vertical shadow ஆகும்.

Output:

Increase the effort!.

The following example shows a red neon glow shadow:

Example

Try this code 
.shadow-glow {
    text-shadow: 0 0 3px #FF0000;
    font-size:30px;
}

மேலே கொடுக்கப்பட்டுள்ள example-லில் முதலில் கொடுக்கப்பட்டுள்ள 2px-horizontal shadow மற்றும் அடுத்த 2px-vertical shadow ஆகும்.

Output:

Increase the effort!.

Multiple Shadows

ஒரு text-க்கு ஒன்றுக்கு மேற்பட்ட shadow effect-ஐ apply செய்ய முடியும். இவ்வாறு பயன்படுத்தும்போது இரண்டு effects-க்கும் இடையில் "," apply செய்யவேண்டும்.

The following example shows a red and blue neon glow shadow:

Example

Try this code 
.multiple-shadow {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
    font-size:30px;
}

மேலே கொடுக்கப்பட்டுள்ள example-லில் முதலில் கொடுக்கப்பட்டுள்ள 2px-horizontal shadow மற்றும் அடுத்த 2px-vertical shadow ஆகும்.

Output:

Each failure brings you one step closer to success

The following example shows a white text with black, blue, and darkblue shadow:

Example

Try this code 
.shadow-mix {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    font-size:30px;
}

Output:

Fear doesn't exit anywhere

ஒரு text-ஐ சுற்றியும் plain border-ஐ உருவாக்க text-shadow property பயன்படுத்தபடுகிறது.

Example

Try this code 
.text-outer-border {
    color: yellowgreen;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size:30px;
}

Output:

Fear doesn't exit anywhere except in the mind.

CSS box-shadow Property

box-shadow property எப்பொழுதும் html element-களுக்கு apply செய்ய பயன்படுகிறது.

Note: நம்மால் box-shadow effect-ஐ horizontal மற்றும் vertical இவ்விரு வழிகளில் மட்டுமே apply செய்ய இயலும்.

Example

Try this code 
.box-shadow-default {
    box-shadow: 10px 10px;
    background-color:#fbe8ae;
    height:100px;
}

Output:

This is a #fbe8ae color <div> element with a black box-shadow

Next, add a color to the shadow:

Example

Try this code 
.color-with-shadow {
    background-color:#e2da51;
    box-shadow: 10px 10px;
    height:100px;
}

Output:

This is a yellowgreen <div> element with a grey box-shadow

Next,shadow உடன் blur effect செர்க்கபடுகிறது

Example

Try this code 
.box-shadow-with-blur {
  box-shadow: 10px 10px 5px grey;
  border:1px solid grey;
  height:100px;
}

Output:

தமிழகம் தந்த அறிவியல் மாமேதைகளுள் ஒருவர். இயந்திரவியல் மற்றும் விவசாயம் சார்ந்த துறைகளில்எண்ணற்ற ஆராய்ச்சிகளை செய்தவர்.
shadow-image-gd-naidu.jpg

Cards

An example of using the box-shadow property to create paper-like cards:

Example

Try this code 
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    border:1px solid grey;
    width:300px;
}
.currency{
    background-color:#9e3744;
    color:#fff;
    font-size:30px;
    text-align:center;
    height:100px;
}
.pdate{
    background-color:#fff;
    text-align:center;
}

Output: Box shadow for card

shadow-image-young-mother.jpg
1980 இல் இந்தியாவின் சிறந்த குடிமக்கள் விருதான பாரத ரத்னா விருதினையும் பெற்றவர்.

Comments