🎚️CSS வடிகட்டி உருவாக்கி

filter-இன் செயல்பாடுகளும் அலகுகளும்

CSS-இன் filter பண்பு, படங்கள் அல்லது உறுப்புகளின் தோற்றத்திற்கு விளைவுகளைச் செலுத்தும் பண்பாகும், blur, sepia போன்ற செயல்பாடுகளை இடைவெளியால் பிரித்து அடுக்கி எழுதப்படும்.

• px (பிக்சல்)：blur செயல்பாடு மங்கலின் ஆரத்தை px-இல் குறிப்பிடும் செயல்பாடு, 4px எனக் குறிப்பிட்டால் 4 பிக்சல் ஆரத்தில் வண்ணங்கள் கலக்கும்.
• % (சதவீதம்)：brightness மற்றும் sepia செயல்பாடுகள் விளைவின் வலிமையை %-இல் குறிப்பிடும் செயல்பாடுகள், brightness-இல் 100% என்பது அசல் பிரகாசம், 120% என்பது 20% அதிகமாக பிரகாசமாக்கிய நிலை.
• deg (பாகை)：hue-rotate செயல்பாடு வண்ண வட்டத்தில் வண்ணத்தைச் சுழற்றும் கோணத்தை deg-இல் குறிப்பிடும் செயல்பாடு, 180deg எனக் குறிப்பிட்டால் வண்ணம் எதிர் பக்க வண்ணத்திற்கு மாறும்.

ஏன் எழுதும் வரிசை முடிவை மாற்றுகிறது

filter-இல் அடுக்கப்பட்ட செயல்பாடுகள் இடமிருந்து வலமாக பயன்படுத்தப்படும், முந்தைய விளைவு செலுத்தப்பட்ட முடிவுக்கு அடுத்த விளைவு செலுத்தப்படுவதால், அடுக்கும் வரிசை மாறினால் தோற்றமும் மாறலாம். எடுத்துக்காட்டாக, கருப்பு வெள்ளையாக்கிய பின் செபியா செலுத்தினால் பழுப்பு நிறம் மீதமிருக்கும், செபியா செலுத்திய பின் கருப்பு வெள்ளையாக்கினால் பழுப்பு நிறம் மறைந்துவிடும். இந்த கருவியில் பயன்படுத்தும் வரிசை நிலையானதாக உள்ளது, ஆனால் உருவாக்கப்பட்ட CSS குறியீட்டைத் திருத்துவதன் மூலம் வரிசையை மாற்றலாம்.

backdrop-filter-உடனான வேறுபாடு

filter-உம் backdrop-filter-உம் ஒரே செயல்பாடுகளைப் பயன்படுத்தும் பண்புகள், ஆனால் விளைவு செலுத்தப்படும் இலக்கு வேறுபடும்.

• filter：filter என்பது, குறிப்பிட்ட உறுப்பு தானே (படம் அல்லது எழுத்து போன்றவை) அதன் தோற்றத்திற்கு விளைவைச் செலுத்தும் பண்பு.
• backdrop-filter：backdrop-filter என்பது, குறிப்பிட்ட உறுப்புக்குப் பின்னால் தெரியும் பகுதிக்கு விளைவைச் செலுத்தும் பண்பு, மங்கலான கண்ணாடி போன்ற வெளிப்பாட்டிற்குப் பயன்படுத்தப்படுகிறது.