தமிழ்

CSS ஃபில்டர் விளைவுகளின் சக்தியைப் பயன்படுத்தி, உலாவியிலேயே படங்களைக் கையாளவும், காட்சிகளை மேம்படுத்தவும் மற்றும் படைப்பாற்றல் வடிவமைப்புகளை உருவாக்கவும். blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, மற்றும் custom filter செயல்பாடுகளைப் பயன்படுத்தி பிரமிக்க வைக்கும் காட்சி முடிவுகளைப் பெறுவது எப்படி என்பதை அறிக.

CSS ஃபில்டர் விளைவுகள்: உலாவியில் பட செயலாக்கம்

வலை மேம்பாட்டின் மாறும் உலகில், காட்சி ஈர்ப்பு மிகவும் முக்கியமானது. CSS ஃபில்டர் விளைவுகள், பல சமயங்களில் வெளிப்புற பட எடிட்டிங் மென்பொருளின் தேவையை நீக்கி, உலாவியிலேயே நேரடியாக படங்களையும் கூறுகளையும் கையாள ஒரு சக்திவாய்ந்த மற்றும் திறமையான வழியை வழங்குகின்றன. இந்தக் கட்டுரை, அடிப்படை செயல்பாடுகள் முதல் மேம்பட்ட நுட்பங்கள் மற்றும் தனிப்பயன் ஃபில்டர் செயல்பாடுகள் வரை CSS ஃபில்டர்களின் பல்திறனை ஆராய்கிறது.

CSS ஃபில்டர் விளைவுகள் என்றால் என்ன?

CSS ஃபில்டர் விளைவுகள் என்பது CSS பண்புகளின் தொகுப்பாகும், அவை உலாவியில் காண்பிக்கப்படுவதற்கு முன்பு கூறுகளுக்கு காட்சி விளைவுகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன. இந்த விளைவுகள் Adobe Photoshop அல்லது GIMP போன்ற பட எடிட்டிங் மென்பொருளில் காணப்படும் விளைவுகளைப் போலவே இருக்கும். அவை உங்கள் வலைப்பக்கங்களில் உள்ள படங்கள் மற்றும் பிற காட்சி உள்ளடக்கத்தை மேம்படுத்த, மாற்றியமைக்க மற்றும் அழகுபடுத்த பரந்த அளவிலான விருப்பங்களை வழங்குகின்றன.

முன்பே திருத்தப்பட்ட படங்களை மட்டும் சார்ந்திருக்காமல், CSS ஃபில்டர்கள் நிகழ்நேர பட செயலாக்கத்தை செயல்படுத்துகின்றன, இது உங்கள் வலைத்தளத்தின் அழகியலில் அதிக நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது. இது குறிப்பாக ரெஸ்பான்சிவ் வடிவமைப்புகளுக்கு பயனுள்ளதாக இருக்கும், அங்கு படங்கள் வெவ்வேறு திரை அளவுகள் மற்றும் தெளிவுத்திறன்களுக்கு ஏற்ப மாற வேண்டும்.

அடிப்படை CSS ஃபில்டர் பண்புகள்

CSS ஃபில்டர்கள் filter என்ற பண்பைப் பயன்படுத்திப் பயன்படுத்தப்படுகின்றன. இந்த பண்பின் மதிப்பு விரும்பிய விளைவைக் குறிப்பிடும் ஒரு செயல்பாடாகும். மிகவும் பொதுவான CSS ஃபில்டர் செயல்பாடுகளின் மேலோட்டம் இங்கே:

நடைமுறை எடுத்துக்காட்டுகள்

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

எடுத்துக்காட்டு 1: ஒரு படத்தை மங்கலாக்குதல்

ஒரு படத்தை மங்கலாக்க, நீங்கள் blur() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்திற்கு 5-பிக்சல் மங்கலைப் பயன்படுத்தும்:


img {
  filter: blur(5px);
}

எடுத்துக்காட்டு 2: பிரகாசம் மற்றும் மாறுபாட்டை சரிசெய்தல்

ஒரு படத்தின் பிரகாசம் மற்றும் மாறுபாட்டை சரிசெய்ய, நீங்கள் brightness() மற்றும் contrast() ஃபில்டர் செயல்பாடுகளைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்தின் பிரகாசம் மற்றும் மாறுபாட்டை அதிகரிக்கும்:


img {
  filter: brightness(1.2) contrast(1.1);
}

எடுத்துக்காட்டு 3: கிரேஸ்கேல் விளைவை உருவாக்குதல்

ஒரு கிரேஸ்கேல் விளைவை உருவாக்க, நீங்கள் grayscale() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்தை கிரேஸ்கேலுக்கு மாற்றும்:


img {
  filter: grayscale(100%);
}

எடுத்துக்காட்டு 4: ஒரு செபியா டோனைப் பயன்படுத்துதல்

ஒரு செபியா டோனைப் பயன்படுத்த, நீங்கள் sepia() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்திற்கு செபியா டோனைப் பயன்படுத்தும்:


img {
  filter: sepia(80%);
}

எடுத்துக்காட்டு 5: ஒரு டிராப் ஷேடோவைச் சேர்த்தல்

ஒரு டிராப் ஷேடோவைச் சேர்க்க, நீங்கள் drop-shadow() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்திற்கு டிராப் ஷேடோவைச் சேர்க்கும்:


img {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

பல ஃபில்டர்களை இணைத்தல்

CSS ஃபில்டர்களின் மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று, சிக்கலான காட்சி விளைவுகளை உருவாக்க பல ஃபில்டர்களை இணைக்கும் திறன் ஆகும். நீங்கள் ஒரே filter பண்பில் பல ஃபில்டர் செயல்பாடுகளை ஒன்றாக இணைக்கலாம். உலாவி, ஃபில்டர்களை பட்டியலிடப்பட்ட வரிசையில் பயன்படுத்தும்.

எடுத்துக்காட்டாக, ஒரு விண்டேஜ் புகைப்பட விளைவை உருவாக்க, நீங்கள் sepia(), contrast(), மற்றும் blur() ஃபில்டர்களை இணைக்கலாம்:


img {
  filter: sepia(0.6) contrast(1.2) blur(2px);
}

செயல்திறன் கருத்தாய்வுகள்

CSS ஃபில்டர்கள் படங்களைக் கையாள ஒரு வசதியான வழியை வழங்கும் அதே வேளையில், செயல்திறனைக் கருத்தில் கொள்வது அவசியம். ஒரு பக்கத்தில் பல கூறுகளுக்கு சிக்கலான ஃபில்டர்களைப் பயன்படுத்துவது, குறிப்பாக பழைய சாதனங்கள் அல்லது உலாவிகளில், காட்சிப்படுத்தல் செயல்திறனை பாதிக்கலாம். செயல்திறனை மேம்படுத்துவதற்கான சில குறிப்புகள் இங்கே:

உலாவி இணக்கத்தன்மை

CSS ஃபில்டர் விளைவுகள் Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்படுகின்றன. இருப்பினும், இன்டர்நெட் எக்ஸ்ப்ளோரரின் பழைய பதிப்புகள் அனைத்து ஃபில்டர் செயல்பாடுகளையும் ஆதரிக்காமல் இருக்கலாம். உற்பத்தி வலைத்தளங்களில் CSS ஃபில்டர்களைப் பயன்படுத்துவதற்கு முன்பு உலாவி இணக்கத்தன்மையைச் சரிபார்ப்பது அவசியம்.

Can I Use (caniuse.com) போன்ற வலைத்தளங்களைப் பயன்படுத்தி வெவ்வேறு உலாவிகள் மற்றும் பதிப்புகளில் CSS ஃபில்டர் விளைவுகளின் இணக்கத்தன்மையைச் சரிபார்க்கலாம்.

பயன்பாட்டு நிகழ்வுகள் மற்றும் பயன்பாடுகள்

CSS ஃபில்டர் விளைவுகள் பல்வேறு பயன்பாடுகளில் பயன்படுத்தப்படலாம், அவற்றுள்:

அடிப்படை ஃபில்டர்களைத் தாண்டி: தனிப்பயன் ஃபில்டர் செயல்பாடுகள் (filter: url())

உள்ளமைக்கப்பட்ட CSS ஃபில்டர் செயல்பாடுகள் நிறைய நெகிழ்வுத்தன்மையை வழங்கினாலும், நீங்கள் ஸ்கேலபிள் வெக்டர் கிராபிக்ஸ் (SVG) ஃபில்டர்களைப் பயன்படுத்தி தனிப்பயன் ஃபில்டர் செயல்பாடுகளையும் உருவாக்கலாம். இது இன்னும் மேம்பட்ட மற்றும் ஆக்கப்பூர்வமான படக் கையாளுதலுக்கு அனுமதிக்கிறது.

ஒரு தனிப்பயன் ஃபில்டர் செயல்பாட்டைப் பயன்படுத்த, நீங்கள் ஒரு SVG கோப்பில் ஃபில்டரை வரையறுத்து, பின்னர் அதை உங்கள் CSS இல் filter: url() பண்பைப் பயன்படுத்தி குறிப்பிட வேண்டும்.

எடுத்துக்காட்டு: ஒரு தனிப்பயன் வண்ண அணி ஃபில்டரை உருவாக்குதல்

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

முதலில், பின்வரும் உள்ளடக்கத்துடன் ஒரு SVG கோப்பை (உதாரணமாக, custom-filter.svg) உருவாக்கவும்:


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="color-matrix">
      <feColorMatrix type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0" />
    </filter>
  </defs>
</svg>

இந்த எடுத்துக்காட்டில், feColorMatrix உறுப்பு color-matrix ஐடி உடன் ஒரு வண்ண அணி ஃபில்டரை வரையறுக்கிறது. values பண்புக்கூறு அணி குணகங்களைக் குறிப்பிடுகிறது. இயல்புநிலை அணி (identity matrix) வண்ணங்களை மாற்றாமல் விடுகிறது. வண்ணங்களைக் கையாள நீங்கள் values பண்புக்கூறை மாற்றியமைக்க வேண்டும்.

அடுத்து, உங்கள் CSS இல் SVG ஃபில்டரைக் குறிப்பிடவும்:


img {
  filter: url("custom-filter.svg#color-matrix");
}

இது படத்திற்கு தனிப்பயன் வண்ண அணி ஃபில்டரைப் பயன்படுத்தும். வெவ்வேறு வண்ண விளைவுகளை உருவாக்க நீங்கள் SVG கோப்பில் உள்ள values பண்புக்கூறை மாற்றியமைக்கலாம். எடுத்துக்காட்டுகளில் செறிவு அதிகரித்தல், வண்ணங்களைத் தலைகீழாக மாற்றுதல் அல்லது ஒரு டுவோடோன் விளைவை உருவாக்குதல் ஆகியவை அடங்கும்.

அணுகல்தன்மை கருத்தாய்வுகள்

CSS ஃபில்டர்களைப் பயன்படுத்தும் போது, அணுகல்தன்மையை கருத்தில் கொள்வது மிகவும் முக்கியம். ஃபில்டர்களை அதிகமாகப் பயன்படுத்துவது அல்லது தவறாகப் பயன்படுத்துவது பார்வை குறைபாடுள்ள பயனர்களுக்கு உள்ளடக்கத்தைப் புரிந்துகொள்வதை கடினமாக்கும்.

எதிர்காலப் போக்குகள் மற்றும் மேம்பாடுகள்

CSS ஃபில்டர் விளைவுகள் தொடர்ந்து உருவாகி வருகின்றன, புதிய ஃபில்டர் செயல்பாடுகள் மற்றும் திறன்கள் CSS விவரக்குறிப்பில் சேர்க்கப்பட்டு வருகின்றன. உலாவிகள் CSS ஃபில்டர்களுக்கான தங்கள் ஆதரவைத் தொடர்ந்து மேம்படுத்துவதால், வலை வடிவமைப்பில் இந்த விளைவுகளின் இன்னும் புதுமையான மற்றும் ஆக்கப்பூர்வமான பயன்பாடுகளை நாம் எதிர்பார்க்கலாம்.

ஒரு நம்பிக்கைக்குரிய போக்கு மேலும் மேம்பட்ட தனிப்பயன் ஃபில்டர் செயல்பாடுகளின் வளர்ச்சியாகும், இது டெவலப்பர்களை இன்னும் சிக்கலான மற்றும் நுட்பமான காட்சி விளைவுகளை உருவாக்க அனுமதிக்கும்.

முடிவுரை

CSS ஃபில்டர் விளைவுகள் உலாவியிலேயே படங்கள் மற்றும் கூறுகளை மேம்படுத்தவும் மாற்றியமைக்கவும் ஒரு சக்திவாய்ந்த மற்றும் பல்துறை வழியை வழங்குகின்றன. பிரகாசம் மற்றும் மாறுபாடு போன்ற அடிப்படை சரிசெய்தல்கள் முதல் மங்கலாக்குதல் மற்றும் வண்ணக் கையாளுதல் போன்ற சிக்கலான விளைவுகள் வரை, CSS ஃபில்டர்கள் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் ஈடுபாட்டுடன் கூடிய வலை அனுபவங்களை உருவாக்க பரந்த அளவிலான விருப்பங்களை வழங்குகின்றன. CSS ஃபில்டர்களின் கொள்கைகளைப் புரிந்துகொண்டு செயல்திறன் மற்றும் அணுகல்தன்மைக்கான சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் இந்த விளைவுகளைப் பயன்படுத்தி பிரமிக்க வைக்கும் மற்றும் பயனர் நட்பு வலைத்தளங்களை உருவாக்கலாம்.

CSS ஃபில்டர்களின் படைப்பு சாத்தியங்களைத் தழுவி, உங்கள் வலை வடிவமைப்புகளை அடுத்த கட்டத்திற்கு உயர்த்துங்கள்!

மேலும் அறிய உதவும் ஆதாரங்கள்

CSS ஃபில்டர் விளைவுகள்: உலாவியில் பட செயலாக்கம் | MLOG