இந்த கட்டுரையின் முடிவுகள் இங்கே:
ஆரம்பிக்கலாம்!
CSS இல் படத்தின் நிறத்தை மாற்றவும்
CSS இல் படத்தின் நிறத்தை மாற்ற, முதலில் வடிகட்டி சொத்து மற்றும் அதன் செயல்பாடுகள் பற்றி அறிந்து கொள்ளுங்கள். இந்த வழியில் நீங்கள் சிறந்த புரிதலைப் பெறுவீர்கள்.
வடிகட்டி CSS சொத்து
காட்சி விளைவைக் கட்டுப்படுத்த, CSS இன் பட வடிகட்டி பண்பு பயன்படுத்தப்படுகிறது. காட்சி விளைவுகள்:
- தெளிவின்மை
- பிரகாசம்
- வண்ண சரிசெய்தல்
- துளி நிழல்
- ஒளிபுகாநிலை
வடிகட்டி சொத்தின் தொடரியல்
வடிகட்டி சொத்தின் தொடரியல்:
வடிகட்டி : தெளிவின்மை ( ) | துளி நிழல் ( ) | ஒளிபுகாநிலை ( )- தெளிவின்மை(): படத்தின் மீது மங்கலான விளைவைப் பயன்படுத்தப் பயன்படுகிறது.
- துளி நிழல்(): ஒரு படத்தின் மீது ஒரு நிழலை உருவாக்கவும்.
- ஒளிபுகாநிலை(): படத்திற்கு வெளிப்படைத்தன்மை சேர்க்க பயன்படுகிறது.
இந்த வடிகட்டிப் பண்புகளைப் பயன்படுத்தி நாம் பல வடிப்பான்களைப் பயன்படுத்தலாம். இந்த கட்டுரை படத்தின் நிறத்தை எவ்வாறு மாற்றுவது என்பது பற்றியது, எனவே துளி-நிழல்(), மற்றும் ஒளிபுகா() செயல்பாடுகளை எவ்வாறு பயன்படுத்துவது என்பதை இங்கு விளக்குவோம்.
துளி நிழல்()
drop-shadow() என்பது CSS இன் உள்ளமைக்கப்பட்ட செயல்பாடாகும், இது எந்த உறுப்பு அல்லது படத்திற்கும் நிழலை அமைக்க அனுமதிக்கிறது. ஒரு படத்தின் நிறத்தை மாற்ற பின்வரும் அளவுருக்கள் துளி நிழல்() செயல்பாட்டில் பயன்படுத்தப்படுகின்றன:
- ஆஃப்செட்-எக்ஸ்: கிடைமட்ட நிழலைச் சேர்க்க இது பயன்படுகிறது.
- ஆஃப்செட்-ஒய்: இதைப் பயன்படுத்தி நிழல்கள் செங்குத்தாக சேர்க்கப்படுகின்றன.
- நிறம்: இந்த அளவுருவுடன் நிழல்கள் வண்ணத்தில் உள்ளன.
இந்த புள்ளிகளை தெளிவுபடுத்த, துளி-நிழலின் தொடரியல் செல்லலாம்:
துளி நிழல் ( ஆஃப்செட்-எக்ஸ் ஆஃப்செட்-ஒய் நிறம் )- ஆஃப்செட்-எக்ஸ் மற்றும் ஆஃப்செட்-ஒய் நேர்மறை அல்லது எதிர்மறையாக இருக்கலாம்.
- கிடைமட்டத்தில், வலது பக்கத்தில் விளைவுகளைச் சேர்க்க நேர்மறை மதிப்பு பயன்படுத்தப்படுகிறது, மேலும் இடது பக்கத்திற்கு எதிர்மறையானது.
- செங்குத்தாக, நேர்மறை மதிப்பு கீழ் பக்கமாகவும், எதிர்மறையானது மேல்புறமாகவும் இருக்கும்.
- வண்ணத்தின் இடத்தில், நீங்கள் படத்திற்கு கொடுக்க விரும்பும் எந்த நிறத்தையும் ஒதுக்கலாம்.
ஒளிபுகாநிலை()
ஒளிபுகா () என்பது ஒரு உறுப்பு அல்லது எந்தப் படத்திற்கும் வெளிப்படைத்தன்மையைச் சேர்க்கப் பயன்படுகிறது. ஒளிபுகா () இன் தொடரியல்:
ஒளிபுகாநிலை ( எண் ) ;இங்கே ' எண் ” நான் s ஒளிபுகா நிலை 0.0 முதல் 1.0 வரை அமைக்கப் பயன்படுகிறது. ஒரு படத்தை முழுமையாக வெளிப்படையானதாக மாற்ற, அதை 0.0 ஆக அமைக்கலாம்.
மேலே குறிப்பிட்டுள்ள புள்ளிகளை தெளிவுபடுத்த, உதாரணத்திற்கு செல்லலாம்.
CSS இல் படத்தின் நிறத்தை மாற்றுவது எப்படி?
கீழே உள்ள எடுத்துக்காட்டில், முதலில், குறிச்சொல்லைப் பயன்படுத்தி ஒரு படத்தைச் சேர்ப்போம்:
< img வர்க்கம் = 'படம்' src = 'image.jpg' எல்லாம் = '' >
< / உடல் >
வடிகட்டி சொத்தை பயன்படுத்துவதற்கு முன், விளைவு இப்படி இருந்தது:
ஒரு படத்தின் நிறத்தை மாற்ற, CSS க்கு நகர்த்தலாம் மற்றும் வடிகட்டி பண்புகளை அதற்குப் பயன்படுத்துவோம். படத்தின் வெளிப்படைத்தன்மைக்கு ஒளிபுகாநிலையை 0.5 ஆக அமைப்போம். drop-shadow() செயல்பாட்டில், offset-x மற்றும் offset-y இன் மதிப்பு 0 ஆகும், ஏனெனில் நாம் ஒரு படத்தின் நிறத்தை மட்டுமே மாற்ற விரும்புகிறோம்.
.படம் {வடிகட்டி : ஒளிபுகாநிலை ( 0.5 ) துளி நிழல் ( 0 0 பழுப்பு ) ;
}
செயல்படுத்தப்பட்ட பிறகு இறுதி முடிவு இங்கே:
படத்தின் நிறம் வெற்றிகரமாக மாற்றப்பட்டது.
முடிவுரை
ஒரு படத்தின் நிறத்தை மாற்ற, இரண்டு CSS செயல்பாடுகள்: ஒளிபுகா() மற்றும் துளி-நிழல்() ஆகியவை வடிகட்டி பண்புடன் பயன்படுத்தப்படுகின்றன. ஒளிபுகா() படத்தின் வெளிப்படைத்தன்மையைக் குறிப்பிடுகிறது மற்றும் துளி-நிழல்() படத்திற்கு நிறம் மற்றும் நிழலை ஒதுக்குகிறது. CSS ஐப் பயன்படுத்தி படத்தின் நிறத்தை மாற்றும் முறையை இந்த பதிவு விளக்குகிறது.