CSS மாஸ்க் பண்புகள்: இணையத்தில் படைப்பாற்றல் மிக்க விஷுவல் விளைவுகளை வெளிக்கொணர்தல்

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

CSS மாஸ்க்குகள் என்றால் என்ன?

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

`mask` மற்றும் `clip-path` ஆகியவற்றுக்கு இடையேயான முக்கிய வேறுபாடு என்னவென்றால், `clip-path` ஒரு வரையறுக்கப்பட்ட வடிவத்தில் உறுப்பை வெறுமனே கிளிப் செய்கிறது, வடிவத்திற்கு வெளியே உள்ள அனைத்தையும் கண்ணுக்கு தெரியாததாக ஆக்குகிறது. மறுபுறம், `mask` ஆனது மாஸ்க் படத்தின் ஆல்பா சேனல் அல்லது ஒளிர்வு மதிப்புகளைப் பயன்படுத்தி உறுப்பின் வெளிப்படைத்தன்மையை தீர்மானிக்கிறது. இது மென்மையான விளிம்புகள் மற்றும் பகுதி-வெளிப்படையான மாஸ்க்குகள் உட்பட பரந்த அளவிலான படைப்பு சாத்தியங்களைத் திறக்கிறது.

CSS மாஸ்க் பண்புகள்: ஒரு ஆழமான பார்வை

முக்கிய CSS மாஸ்க் பண்புகளின் ஒரு முறிவு இங்கே:

• `mask-image`: மாஸ்க் லேயராகப் பயன்படுத்தப்பட வேண்டிய படம் அல்லது கிரேடியன்ட்டைக் குறிப்பிடுகிறது.
• `mask-mode`: மாஸ்க் படத்தை எவ்வாறு விளக்க வேண்டும் என்பதை வரையறுக்கிறது (எ.கா., ஆல்பா மாஸ்க் அல்லது ஒளிர்வு மாஸ்க் ஆக).
• `mask-repeat`: மாஸ்க் செய்யப்பட்ட உறுப்பை விட மாஸ்க் படம் சிறியதாக இருந்தால் அது எவ்வாறு மீண்டும் மீண்டும் காட்டப்பட வேண்டும் என்பதைக் கட்டுப்படுத்துகிறது.
• `mask-position`: உறுப்புக்குள் மாஸ்க் படத்தின் ஆரம்ப நிலையை தீர்மானிக்கிறது.
• `mask-size`: மாஸ்க் படத்தின் அளவைக் குறிப்பிடுகிறது.
• `mask-origin`: மாஸ்க் நிலைப்படுத்தலுக்கான தொடக்க புள்ளியை அமைக்கிறது.
• `mask-clip`: மாஸ்க்கால் கிளிப் செய்யப்படும் பகுதியை வரையறுக்கிறது.
• `mask-composite`: பல மாஸ்க் லேயர்கள் எவ்வாறு இணைக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது.
• `mask`: ஒரே நேரத்தில் பல மாஸ்க் பண்புகளை அமைப்பதற்கான ஒரு சுருக்கெழுத்து பண்பு.

`mask-image`

`mask-image` பண்பு CSS மாஸ்கிங்கின் அடித்தளமாகும். இது மாஸ்க்காகப் பயன்படுத்தப்படும் படம் அல்லது கிரேடியன்ட்டைக் குறிப்பிடுகிறது. PNG, SVG, மற்றும் GIF கள் உட்பட பல்வேறு பட வடிவங்களைப் பயன்படுத்தலாம். மாறும் மற்றும் தனிப்பயனாக்கக்கூடிய மாஸ்க்குகளை உருவாக்க நீங்கள் CSS கிரேடியன்ட்களையும் பயன்படுத்தலாம்.

உதாரணம்: ஒரு PNG படத்தை மாஸ்க்காகப் பயன்படுத்துதல்

.masked-element {
  mask-image: url("mask.png");
}

இந்த எடுத்துக்காட்டில், `.masked-element`-ஐ மாஸ்க் செய்ய `mask.png` படம் பயன்படுத்தப்படும். PNG இன் வெளிப்படையான பகுதிகள் உறுப்பின் தொடர்புடைய பகுதிகளை வெளிப்படையானதாக மாற்றும், அதே நேரத்தில் ஒளிபுகா பகுதிகள் உறுப்பின் தொடர்புடைய பகுதிகளைத் தெரியும்படி செய்யும்.

உதாரணம்: ஒரு CSS கிரேடியன்டை மாஸ்க்காகப் பயன்படுத்துதல்

.masked-element {
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

இந்த எடுத்துக்காட்டு `.masked-element`-இல் ஒரு மங்கல் விளைவை உருவாக்க ஒரு நேரியல் கிரேடியன்டைப் பயன்படுத்துகிறது. கிரேடியன்ட் ஒளிபுகா கருப்பிலிருந்து வெளிப்படையானதாக மாறுகிறது, இது ஒரு மென்மையான ஃபேட்-அவுட் விளைவை உருவாக்குகிறது.

`mask-mode`

`mask-mode` பண்பு மாஸ்க் படத்தை எவ்வாறு விளக்குகிறது என்பதை தீர்மானிக்கிறது. இது பல சாத்தியமான மதிப்புகளைக் கொண்டுள்ளது:

• `alpha`: மாஸ்க் படத்தின் ஆல்பா சேனல் உறுப்பின் வெளிப்படைத்தன்மையை தீர்மானிக்கிறது. மாஸ்க் படத்தின் ஒளிபுகா பகுதிகள் உறுப்பைத் தெரியும்படி செய்கின்றன, அதே நேரத்தில் வெளிப்படையான பகுதிகள் அதை கண்ணுக்கு தெரியாததாக ஆக்குகின்றன. இது இயல்புநிலை மதிப்பாகும்.
• `luminance`: மாஸ்க் படத்தின் ஒளிர்வு (பிரகாசம்) உறுப்பின் வெளிப்படைத்தன்மையை தீர்மானிக்கிறது. மாஸ்க் படத்தின் பிரகாசமான பகுதிகள் உறுப்பைத் தெரியும்படி செய்கின்றன, அதே நேரத்தில் இருண்ட பகுதிகள் அதை கண்ணுக்கு தெரியாததாக ஆக்குகின்றன.
• `match-source`: மாஸ்க் மோட் மாஸ்க் மூலத்தால் தீர்மானிக்கப்படுகிறது. மாஸ்க் மூலம் ஆல்பா சேனலுடன் கூடிய படமாக இருந்தால், `alpha` பயன்படுத்தப்படுகிறது. மாஸ்க் மூலம் ஆல்பா சேனல் இல்லாத படமாகவோ அல்லது கிரேடியன்ட்டாகவோ இருந்தால், `luminance` பயன்படுத்தப்படுகிறது.
• `inherit`: பெற்றோர் உறுப்பிலிருந்து `mask-mode` மதிப்பை மரபுரிமையாகப் பெறுகிறது.
• `initial`: இந்த பண்பை அதன் இயல்புநிலை மதிப்புக்கு அமைக்கிறது.
• `unset`: இந்த பண்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற்றால் அதன் மரபுரிமை மதிப்புக்கும் அல்லது இல்லையெனில் அதன் ஆரம்ப மதிப்புக்கும் மீட்டமைக்கிறது.

உதாரணம்: `mask-mode: luminance` பயன்படுத்துதல்

.masked-element {
  mask-image: url("grayscale-image.jpg");
  mask-mode: luminance;
}

இந்த எடுத்துக்காட்டில், ஒரு கிரேஸ்கேல் படம் மாஸ்க்காகப் பயன்படுத்தப்படுகிறது. படத்தின் பிரகாசமான பகுதிகள் `.masked-element`-இன் தொடர்புடைய பகுதிகளைத் தெரியும்படி செய்யும், அதே நேரத்தில் இருண்ட பகுதிகள் அவற்றை கண்ணுக்கு தெரியாததாக மாற்றும்.

`mask-repeat`

`mask-repeat` பண்பு மாஸ்க் செய்யப்பட்ட உறுப்பை விட மாஸ்க் படம் சிறியதாக இருந்தால் அது எவ்வாறு மீண்டும் மீண்டும் காட்டப்பட வேண்டும் என்பதைக் கட்டுப்படுத்துகிறது. இது `background-repeat` பண்பைப் போலவே செயல்படுகிறது.

• `repeat`: முழு உறுப்பையும் மறைக்க மாஸ்க் படம் கிடைமட்டமாகவும் செங்குத்தாகவும் மீண்டும் மீண்டும் காட்டப்படுகிறது. இது இயல்புநிலை மதிப்பாகும்.
• `repeat-x`: மாஸ்க் படம் கிடைமட்டமாக மட்டுமே மீண்டும் மீண்டும் காட்டப்படுகிறது.
• `repeat-y`: மாஸ்க் படம் செங்குத்தாக மட்டுமே மீண்டும் மீண்டும் காட்டப்படுகிறது.
• `no-repeat`: மாஸ்க் படம் மீண்டும் மீண்டும் காட்டப்படாது.
• `space`: மாஸ்க் படம் கிளிப் செய்யப்படாமல் முடிந்தவரை பல முறை மீண்டும் மீண்டும் காட்டப்படுகிறது. கூடுதல் இடம் படங்களுக்கு இடையில் சமமாக விநியோகிக்கப்படுகிறது.
• `round`: மாஸ்க் படம் முடிந்தவரை பல முறை மீண்டும் மீண்டும் காட்டப்படுகிறது, ஆனால் படங்கள் உறுப்புக்கு பொருந்தும் வகையில் அளவிடப்படலாம்.
• `inherit`: பெற்றோர் உறுப்பிலிருந்து `mask-repeat` மதிப்பை மரபுரிமையாகப் பெறுகிறது.
• `initial`: இந்த பண்பை அதன் இயல்புநிலை மதிப்புக்கு அமைக்கிறது.
• `unset`: இந்த பண்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற்றால் அதன் மரபுரிமை மதிப்புக்கும் அல்லது இல்லையெனில் அதன் ஆரம்ப மதிப்புக்கும் மீட்டமைக்கிறது.

உதாரணம்: `mask-repeat: no-repeat` பயன்படுத்துதல்

.masked-element {
  mask-image: url("small-mask.png");
  mask-repeat: no-repeat;
}

இந்த எடுத்துக்காட்டில், `small-mask.png` படம் மாஸ்க்காகப் பயன்படுத்தப்படும், ஆனால் அது மீண்டும் மீண்டும் காட்டப்படாது. உறுப்பு மாஸ்க் படத்தை விட பெரியதாக இருந்தால், மாஸ்க் செய்யப்படாத பகுதிகள் தெரியும்.

`mask-position`

`mask-position` பண்பு உறுப்புக்குள் மாஸ்க் படத்தின் ஆரம்ப நிலையை தீர்மானிக்கிறது. இது `background-position` பண்பைப் போலவே செயல்படுகிறது.

நிலையைக் குறிப்பிட `top`, `bottom`, `left`, `right`, மற்றும் `center` போன்ற முக்கிய வார்த்தைகளைப் பயன்படுத்தலாம், அல்லது நீங்கள் பிக்சல் அல்லது சதவீத மதிப்புகளைப் பயன்படுத்தலாம்.

உதாரணம்: `mask-position: center` பயன்படுத்துதல்

.masked-element {
  mask-image: url("small-mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
}

இந்த எடுத்துக்காட்டில், `small-mask.png` படம் `.masked-element`-க்குள் மையப்படுத்தப்படும்.

`mask-size`

`mask-size` பண்பு மாஸ்க் படத்தின் அளவைக் குறிப்பிடுகிறது. இது `background-size` பண்பைப் போலவே செயல்படுகிறது.

• `auto`: மாஸ்க் படம் அதன் அசல் அளவில் காட்டப்படுகிறது. இது இயல்புநிலை மதிப்பாகும்.
• `contain`: மாஸ்க் படம் அதன் விகிதத்தைத் தக்க வைத்துக் கொண்டு உறுப்புக்குள் பொருந்தும் வகையில் அளவிடப்படுகிறது. முழு படமும் தெரியும், ஆனால் அதைச் சுற்றி வெற்று இடம் இருக்கலாம்.
• `cover`: மாஸ்க் படம் அதன் விகிதத்தைத் தக்க வைத்துக் கொண்டு முழு உறுப்பையும் நிரப்ப அளவிடப்படுகிறது. உறுப்புக்கு பொருந்தும் வகையில் தேவைப்பட்டால் படம் செதுக்கப்படும்.
• `length`: மாஸ்க் படத்தின் அகலம் மற்றும் உயரத்தை பிக்சல்கள் அல்லது பிற அலகுகளில் குறிப்பிடுகிறது.
• `percentage`: மாஸ்க் படத்தின் அகலம் மற்றும் உயரத்தை உறுப்பின் அளவின் சதவீதமாகக் குறிப்பிடுகிறது.
• `inherit`: பெற்றோர் உறுப்பிலிருந்து `mask-size` மதிப்பை மரபுரிமையாகப் பெறுகிறது.
• `initial`: இந்த பண்பை அதன் இயல்புநிலை மதிப்புக்கு அமைக்கிறது.
• `unset`: இந்த பண்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற்றால் அதன் மரபுரிமை மதிப்புக்கும் அல்லது இல்லையெனில் அதன் ஆரம்ப மதிப்புக்கும் மீட்டமைக்கிறது.

உதாரணம்: `mask-size: cover` பயன்படுத்துதல்

.masked-element {
  mask-image: url("mask.png");
  mask-size: cover;
}

இந்த எடுத்துக்காட்டில், `mask.png` படம் முழு `.masked-element`-ஐயும் மறைக்க அளவிடப்படும், தேவைப்பட்டால் படத்தை செதுக்கலாம்.

`mask-origin`

`mask-origin` பண்பு மாஸ்க் நிலைப்படுத்தலுக்கான தொடக்க புள்ளியை அமைக்கிறது. இது `mask-position` பண்பு கணக்கிடப்படும் புள்ளியை தீர்மானிக்கிறது.

• `border-box`: மாஸ்க் படம் உறுப்பின் பார்டர் பெட்டிக்கு சார்பாக நிலைநிறுத்தப்படுகிறது. இது இயல்புநிலை மதிப்பாகும்.
• `padding-box`: மாஸ்க் படம் உறுப்பின் பேடிங் பெட்டிக்கு சார்பாக நிலைநிறுத்தப்படுகிறது.
• `content-box`: மாஸ்க் படம் உறுப்பின் உள்ளடக்க பெட்டிக்கு சார்பாக நிலைநிறுத்தப்படுகிறது.
• `inherit`: பெற்றோர் உறுப்பிலிருந்து `mask-origin` மதிப்பை மரபுரிமையாகப் பெறுகிறது.
• `initial`: இந்த பண்பை அதன் இயல்புநிலை மதிப்புக்கு அமைக்கிறது.
• `unset`: இந்த பண்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற்றால் அதன் மரபுரிமை மதிப்புக்கும் அல்லது இல்லையெனில் அதன் ஆரம்ப மதிப்புக்கும் மீட்டமைக்கிறது.

`mask-clip`

`mask-clip` பண்பு மாஸ்க்கால் கிளிப் செய்யப்படும் பகுதியை வரையறுக்கிறது. இது உறுப்பின் எந்தப் பகுதிகள் மாஸ்க்கால் பாதிக்கப்படுகின்றன என்பதை தீர்மானிக்கிறது.

• `border-box`: மாஸ்க் உறுப்பின் முழு பார்டர் பெட்டிக்கும் பயன்படுத்தப்படுகிறது. இது இயல்புநிலை மதிப்பாகும்.
• `padding-box`: மாஸ்க் உறுப்பின் பேடிங் பெட்டிக்கு பயன்படுத்தப்படுகிறது.
• `content-box`: மாஸ்க் உறுப்பின் உள்ளடக்க பெட்டிக்கு பயன்படுத்தப்படுகிறது.
• `text`: மாஸ்க் உறுப்பின் உரை உள்ளடக்கத்திற்கு பயன்படுத்தப்படுகிறது. இந்த மதிப்பு சோதனைக்குரியது மற்றும் அனைத்து உலாவிகளாலும் ஆதரிக்கப்படாமல் இருக்கலாம்.
• `inherit`: பெற்றோர் உறுப்பிலிருந்து `mask-clip` மதிப்பை மரபுரிமையாகப் பெறுகிறது.
• `initial`: இந்த பண்பை அதன் இயல்புநிலை மதிப்புக்கு அமைக்கிறது.
• `unset`: இந்த பண்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற்றால் அதன் மரபுரிமை மதிப்புக்கும் அல்லது இல்லையெனில் அதன் ஆரம்ப மதிப்புக்கும் மீட்டமைக்கிறது.

`mask-composite`

`mask-composite` பண்பு பல மாஸ்க் லேயர்கள் எவ்வாறு இணைக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது. ஒரே உறுப்புக்கு பல `mask-image` அறிவிப்புகள் பயன்படுத்தப்படும்போது இந்த பண்பு பயனுள்ளதாக இருக்கும்.

• `add`: மாஸ்க் லேயர்கள் ஒன்றாக சேர்க்கப்படுகின்றன. இதன் விளைவாக வரும் மாஸ்க் அனைத்து மாஸ்க் லேயர்களின் ஒன்றிப்பாகும்.
• `subtract`: இரண்டாவது மாஸ்க் லேயர் முதல் மாஸ்க் லேயரிலிருந்து கழிக்கப்படுகிறது.
• `intersect`: இதன் விளைவாக வரும் மாஸ்க் அனைத்து மாஸ்க் லேயர்களின் வெட்டுப்பகுதியாகும். அனைத்து லேயர்களாலும் மாஸ்க் செய்யப்பட்ட பகுதிகள் மட்டுமே தெரியும்.
• `exclude`: இதன் விளைவாக வரும் மாஸ்க் அனைத்து மாஸ்க் லேயர்களின் பிரத்தியேக அல்லது (XOR) ஆகும்.
• `inherit`: பெற்றோர் உறுப்பிலிருந்து `mask-composite` மதிப்பை மரபுரிமையாகப் பெறுகிறது.
• `initial`: இந்த பண்பை அதன் இயல்புநிலை மதிப்புக்கு அமைக்கிறது.
• `unset`: இந்த பண்பு பெற்றோர் உறுப்பிலிருந்து மரபுரிமையாகப் பெற்றால் அதன் மரபுரிமை மதிப்புக்கும் அல்லது இல்லையெனில் அதன் ஆரம்ப மதிப்புக்கும் மீட்டமைக்கிறது.

`mask` (சுருக்கெழுத்து பண்பு)

`mask` பண்பு ஒரே நேரத்தில் பல மாஸ்க் பண்புகளை அமைப்பதற்கான ஒரு சுருக்கெழுத்து ஆகும். இது `mask-image`, `mask-mode`, `mask-repeat`, `mask-position`, `mask-size`, `mask-origin`, மற்றும் `mask-clip` பண்புகளை ஒரே அறிவிப்பில் குறிப்பிட உங்களை அனுமதிக்கிறது.

உதாரணம்: `mask` சுருக்கெழுத்து பண்பைப் பயன்படுத்துதல்

.masked-element {
  mask: url("mask.png") no-repeat center / cover;
}

இது இதற்கு சமமானது:

.masked-element {
  mask-image: url("mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

நடைமுறை பயன்பாட்டு வழக்குகள் மற்றும் எடுத்துக்காட்டுகள்

CSS மாஸ்கிங் பல்வேறு வகையான விஷுவல் விளைவுகளை உருவாக்கப் பயன்படுத்தப்படலாம். இங்கே சில எடுத்துக்காட்டுகள்:

1. ஹோவர் செய்யும்போது உள்ளடக்கத்தை வெளிப்படுத்துதல்

பயனர் ஒரு உறுப்பின் மீது ஹோவர் செய்யும்போது உள்ளடக்கம் வெளிப்படுத்தப்படும் ஒரு விளைவை உருவாக்க நீங்கள் CSS மாஸ்க்குகளைப் பயன்படுத்தலாம். இது உங்கள் வடிவமைப்புகளுக்கு ஊடாடும் தன்மையையும் ஆர்வத்தையும் சேர்க்கப் பயன்படும்.

  

    
Hidden Content
    
This content is revealed on hover.
  

.reveal-container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.reveal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  mask-image: url("circle-mask.png");
  mask-size: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: mask-size 0.3s ease;
}

.reveal-container:hover .reveal-content {
  mask-size: 200%;
}

இந்த எடுத்துக்காட்டில், ஒரு சிறிய வட்ட மாஸ்க் ஆரம்பத்தில் `.reveal-content`-க்கு பயன்படுத்தப்படுகிறது. பயனர் `.reveal-container`-ன் மீது ஹோவர் செய்யும்போது, மாஸ்க் அளவு அதிகரித்து, மறைக்கப்பட்ட உள்ளடக்கத்தை வெளிப்படுத்துகிறது.

2. வடிவ மேலடுக்குகளை உருவாக்குதல்

படங்கள் அல்லது பிற உறுப்புகளில் சுவாரஸ்யமான வடிவ மேலடுக்குகளை உருவாக்க CSS மாஸ்க்குகளைப் பயன்படுத்தலாம். இது உங்கள் வடிவமைப்புகளுக்கு ஒரு தனித்துவமான விஷுவல் பாணியைச் சேர்க்கப் பயன்படும்.

.shape-overlay {
  position: relative;
  width: 400px;
  height: 300px;
}

.shape-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shape-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  mask-image: url("triangle-mask.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

இந்த எடுத்துக்காட்டில், படத்தின் மீது ஒரு சூடோ-உறுப்புக்கு ஒரு முக்கோண மாஸ்க் பயன்படுத்தப்படுகிறது. இது படத்திற்கு விஷுவல் ஆர்வத்தைச் சேர்க்கும் ஒரு வடிவ மேலடுக்கு விளைவை உருவாக்குகிறது.

3. உரை மாஸ்கிங்

`mask-clip: text` இன்னும் சோதனை நிலையில் இருந்தாலும், உரையின் பின்னால் ஒரு பின்னணிப் படத்துடன் ஒரு உறுப்பை நிலைநிறுத்தி, உரையையே மாஸ்க்காகப் பயன்படுத்தி உரை மாஸ்கிங் விளைவுகளை அடையலாம். இந்த நுட்பம் பார்வைக்கு ஈர்க்கக்கூடிய அச்சுக்கலையை உருவாக்க முடியும்.

  
Masked Text

.text-mask {
  position: relative;
  width: 500px;
  height: 200px;
  font-size: 72px;
  font-weight: bold;
  color: white;
  background-image: url("background.jpg");
  background-size: cover;
  -webkit-text-fill-color: transparent; /* Required for Safari */
  -webkit-background-clip: text; /* Required for Safari */
  background-clip: text;
}

இந்த எடுத்துக்காட்டு `background-clip: text` (பரந்த இணக்கத்தன்மைக்கு விற்பனையாளர் முன்னொட்டுகளுடன்) ஐப் பயன்படுத்தி உரையை ஒரு மாஸ்க்காகப் பயன்படுத்துகிறது, அதன் பின்னால் உள்ள பின்னணிப் படத்தை வெளிப்படுத்துகிறது.

4. அனிமேஷன் செய்யப்பட்ட மாஸ்க்குகளை உருவாக்குதல்

`mask-position` அல்லது `mask-size` பண்புகளை அனிமேஷன் செய்வதன் மூலம், நீங்கள் மாறும் மற்றும் ஈர்க்கக்கூடிய மாஸ்க் விளைவுகளை உருவாக்கலாம். இது உங்கள் வடிவமைப்புகளுக்கு இயக்கத்தையும் ஊடாடும் தன்மையையும் சேர்க்கப் பயன்படும்.

.animated-mask {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.animated-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: url("circle-mask.png");
  mask-size: 50px;
  mask-repeat: repeat;
  mask-position: 0 0;
  animation: moveMask 5s linear infinite;
}

@keyframes moveMask {
  0% {
    mask-position: 0 0;
  }
  100% {
    mask-position: 100% 100%;
  }
}

இந்த எடுத்துக்காட்டில், `mask-position` அனிமேஷன் செய்யப்பட்டுள்ளது, இது காலப்போக்கில் படத்தின் வெவ்வேறு பகுதிகளை வெளிப்படுத்தும் ஒரு நகரும் மாஸ்க் விளைவை உருவாக்குகிறது.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

CSS மாஸ்க்குகளுடன் பணிபுரியும்போது, பின்வரும் சிறந்த நடைமுறைகளை மனதில் கொள்ளுங்கள்:

• செயல்திறன்: சிக்கலான மாஸ்க்குகள், குறிப்பாக பெரிய படங்கள் அல்லது நுட்பமான கிரேடியன்ட்களைப் பயன்படுத்துபவை, செயல்திறனை பாதிக்கலாம். உங்கள் மாஸ்க் படங்கள் மற்றும் கிரேடியன்ட்களின் அளவு மற்றும் சிக்கலைக் குறைக்க அவற்றை மேம்படுத்துங்கள். சிறந்த செயல்திறன் மற்றும் அளவிடுதலுக்கு வெக்டர் அடிப்படையிலான மாஸ்க்குகளை (SVGs) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• உலாவி இணக்கத்தன்மை: CSS மாஸ்க் பண்புகள் நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்பட்டாலும், பழைய உலாவிகள் அவற்றை ஆதரிக்காமல் இருக்கலாம். மாஸ்க் ஆதரவைச் சரிபார்க்க அம்சக் கண்டறிதலை (எ.கா., Modernizr) பயன்படுத்தவும் மற்றும் பழைய உலாவிகளுக்கு ஃபால்பேக் தீர்வுகளை வழங்கவும். சில உலாவிகளின் பழைய பதிப்புகளுடன் இணக்கத்தன்மையை உறுதிப்படுத்த நீங்கள் விற்பனையாளர் முன்னொட்டுகளையும் (எ.கா., `-webkit-mask-image`) பயன்படுத்தலாம்.
• அணுகல்தன்மை: உங்கள் CSS மாஸ்க்குகளின் பயன்பாடு உங்கள் வலைத்தளத்தின் அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். மாஸ்க் செய்யப்பட்ட உறுப்புகளைப் பார்க்க முடியாத பயனர்களுக்கு மாற்று உள்ளடக்கம் அல்லது ஸ்டைலிங்கை வழங்கவும். மாஸ்க் செய்யப்பட்ட உள்ளடக்கத்தின் பொருள் மற்றும் நோக்கத்தை தெரிவிக்க பொருத்தமான ARIA பண்புகளைப் பயன்படுத்தவும்.
• பட மேம்படுத்தல்: உங்கள் மாஸ்க் படங்களை வலைப் பயன்பாட்டிற்கு மேம்படுத்துங்கள். பொருத்தமான பட வடிவங்களைப் பயன்படுத்தவும் (எ.கா., வெளிப்படைத்தன்மையுடன் கூடிய படங்களுக்கு PNG, புகைப்படங்களுக்கு JPEG) மற்றும் அவற்றின் கோப்பு அளவைக் குறைக்க உங்கள் படங்களை சுருக்கவும்.
• சோதனை: உங்கள் CSS மாஸ்க் செயலாக்கங்கள் சரியாக ரெண்டர் செய்யப்படுகின்றனவா மற்றும் சிறப்பாக செயல்படுகின்றனவா என்பதை உறுதிப்படுத்த வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் முழுமையாக சோதிக்கவும்.
• முற்போக்கான மேம்பாடு: மாஸ்கிங்கை ஒரு முற்போக்கான மேம்பாடாக செயல்படுத்தவும். வரையறுக்கப்பட்ட உலாவி ஆதரவு உள்ள பயனர்களுக்கு ஒரு அடிப்படை, செயல்பாட்டு வடிவமைப்பை வழங்கவும், பின்னர் நவீன உலாவிகள் உள்ள பயனர்களுக்கு CSS மாஸ்க்குகளுடன் வடிவமைப்பை மேம்படுத்தவும்.

மாற்று வழிகள் மற்றும் ஃபால்பேக்குகள்

CSS மாஸ்க் பண்புகளை ஆதரிக்காத பழைய உலாவிகளை நீங்கள் ஆதரிக்க வேண்டும் என்றால், பின்வரும் மாற்று வழிகளைப் பயன்படுத்தலாம்:

• `clip-path`: `clip-path` பண்பு உறுப்புகளை அடிப்படை வடிவங்களில் கிளிப் செய்யப் பயன்படுத்தப்படலாம். இது CSS மாஸ்க்குகள் போன்ற நெகிழ்வுத்தன்மையை வழங்காவிட்டாலும், எளிய மாஸ்கிங் விளைவுகளை உருவாக்க இதைப் பயன்படுத்தலாம்.
• JavaScript: மேலும் சிக்கலான மாஸ்கிங் விளைவுகளை உருவாக்க நீங்கள் JavaScript-ஐப் பயன்படுத்தலாம். இந்த அணுகுமுறைக்கு அதிக குறியீடு தேவைப்படுகிறது, ஆனால் இது அதிக கட்டுப்பாடு மற்றும் நெகிழ்வுத்தன்மையை வழங்க முடியும். Fabric.js போன்ற நூலகங்கள் JavaScript உடன் மாஸ்க்குகளை உருவாக்குவதையும் கையாளுவதையும் எளிதாக்கலாம்.
• சர்வர்-பக்க பட கையாளுதல்: மாஸ்கிங் விளைவுகளைப் பயன்படுத்த உங்கள் படங்களை சர்வரில் முன்கூட்டியே செயலாக்கலாம். இந்த அணுகுமுறை கிளையன்ட் பக்க செயலாக்கத்தின் அளவைக் குறைக்கிறது, ஆனால் இதற்கு அதிக சர்வர் பக்க வளங்கள் தேவைப்படுகின்றன.

முடிவுரை

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

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