CSS দিয়ে Mask ইফেক্ট: ট্রান্সপারেন্ট পিক্সেলকে রঙিন করা ও অপেককে ট্রান্সপারেন্ট

ওভারভিউ

Mask ইফেক্ট একটি এলিমেন্টের ট্রান্সপারেন্ট পিক্সেলগুলকে একটি নির্দিষ্ট রঙে রূপান্তর করে এবং অপেক (Opaque) পিক্সেলগুলকে ট্রান্সপারেন্ট করে দেয়। লিগ্যাসি IE-এ filter: Mask() ব্যবহার হত। আধুনিক CSS-এ mask-image, mask-mode, বা SVG <mask> ব্যবহার করা হয়।

লিগ্যাসি প্যারামিটার (IE Only)

লিগ্যাসি উদাহরণ (IE Only)

<html>
<head></head>
<body>
    <img src="/css/images/logo.png" alt="CSS Logo" 
        style="filter: Chroma(Color=#000000) Mask(Color=#00FF00)">
    <p>Text Example:</p>
    <div style="width: 357px; height: 50px; font-size: 30pt; font-family: Arial Black; color: red; 
        filter: Mask(Color=#00FF00)">
        CSS Tutorials
    </div>
</body>
</html>

আধুনিক CSS Mask পদ্ধতিসমূহ

১. CSS Mask Properties (সরাসরি ইমেজ/গ্রেডিয়েন্ট মাস্ক)

.mask-image {
    /* PNG/SVG আলফা চ্যানেল ব্যবহার করে মাস্ক */
    mask-image: url(mask.png); /* সাদা = দৃশ্যমান, কালো = লুকানো */
    mask-mode: alpha; /* ডিফল্ট: আলফা চ্যানেল ব্যবহার */
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
}

/* গ্রেডিয়েন্ট মাস্ক (ফেড আউট ইফেক্ট) */
.mask-gradient {
    mask-image: linear-gradient(black, transparent);
    /* বা radial-gradient(circle, black 50%, transparent) */
}

২. SVG <mask> Element (ভেক্টর মাস্ক, আরও শক্তিশালী)

<svg width="0" height="0">
  <mask id="svg-mask" maskUnits="objectBoundingBox">
    <rect x="0" y="0" width="1" height="1" fill="white" /> <!-- দৃশ্যমান -->
    <circle cx="0.5" cy="0.5" r="0.3" fill="black" /> <!-- গোলাকার হোল -->
  </mask>
</svg>

.svg-masked {
    mask: url(#svg-mask);
    /* বা CSS-এ: -webkit-mask: url(#svg-mask); mask: url(#svg-mask); */
}

৩. Text Clipping / Background Clip (টেক্সটে ইমেজ ভরা)

.text-mask {
    background: url(image.jpg) center/cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

পূর্ণ উদাহরণ (আধুনিক)

<!DOCTYPE html>
<html>
<head>
<style>
    .demo { width: 200px; margin: 20px; display: inline-block; }
    
    /* Alpha Mask with PNG */
    .alpha-mask {
        -webkit-mask-image: url(mask-circle.png);
        mask-image: url(mask-circle.png);
        mask-mode: alpha;
    }
    
    /* Gradient Mask (Fade Bottom) */
    .gradient-mask {
        -webkit-mask-image: linear-gradient(black 70%, transparent);
        mask-image: linear-gradient(black 70%, transparent);
    }
    
    /* SVG Mask (Circle Cutout) */
    .svg-mask {
        -webkit-mask: url(#circle-mask);
        mask: url(#circle-mask);
    }
    
    /* Text Mask (Image inside Text) */
    .text-mask {
        font-size: 60px; font-weight: bold; text-transform: uppercase;
        background: url(texture.jpg) center/cover;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
</style>
</head>
<body>
<svg style="display:none;">
  <mask id="circle-mask" maskUnits="objectBoundingBox">
    <rect width="1" height="1" fill="white"/>
    <circle cx="0.5" cy="0.5" r="0.4" fill="black"/>
  </mask>
</svg>

<div class="demo">
    <h3>Alpha Mask (PNG)</h3>
    <img src="photo.jpg" class="alpha-mask" alt="Masked">
</div>

<div class="demo">
    <h3>Gradient Mask</h3>
    <img src="photo.jpg" class="gradient-mask" alt="Fade">
</div>

<div class="demo">
    <h3>SVG Circle Mask</h3>
    <img src="photo.jpg" class="svg-mask" alt="Circle">
</div>

<div class="demo">
    <h3>Text Mask</h3>
    <div class="text-mask">MASKED</div>
</div>
</body>
</html>

Mask vs Clip-path - পার্থক্য

ব্রাউজার সাপোর্ট

• mask-image (CSS Masking Level 1): Chrome 4+ (-webkit-), Firefox 53+, Safari 4+ (-webkit-), Edge 79+
• mask (shorthand): সমান
• SVG <mask>: IE10+, সব আধুনিক ব্রাউজার
• Prefix: -webkit-mask-* এখনও নিরাপদ (Safari, পুরানো Chrome-এ)۔

ব্যবহারের ক্ষেত্র

• ইমেজ ক্রপিং (সার্কেল, হেক্সাগন, কাস্টম শেপ)
• ফেড আউট/গ্রেডিয়েন্ট ট্রানজিশন
• টেক্সটে টেক্সচার/ইমেজ ভরা (Background-clip: text)
• হোভার রিভিল ইফেক্ট (মাস্ক অ্যানিমেট করে)
• SVG আইকন রঙিন করা (Mask + Background-color)

সতর্কতা

• লিগ্যাসি filter: Mask() শুধু IE 4-9-এ কাজ করে।
• mask-mode: luminance (লিউমিন্যান্স-ভিত্তিক) সাপোর্ট সীমিত। alpha ব্যবহার করুন।
• মাস্ক ইমেজের আকার কন্টেইনারের সাথে মেলাতে mask-size: cover/contain ব্যবহার করুন।