CSS মাস্ক

CSS মাস্ক ব্যবহার করে, আপনি একটি মাস্ক লেয়ার তৈরি করতে পারেন এবং তা ইলেমেন্টের ওপর স্থাপন করতে পারেন যাতে ইলেমেন্টের কিছু অংশকে অংশবিশেষে বা সম্পূর্ণরূপে লুকিয়ে রাখা যায়。

mask-image অ্যাট্রিবিউট

CSS mask-image অ্যাট্রিবিউট মাস্ক লেয়ার ইমেজ নির্দেশ করে。

মাস্ক লেয়ার ইমেজ হতে পারে PNG ইমেজ, SVG ইমেজ,CSS গ্রেডেন্ট বা SVG <mask> ইলেমেন্ট。

ব্রাউজার সমর্থন

হিসাবে নীচের টাবলের সংখ্যা এই অ্যাট্রিবিউটকে পূর্ণাত্মকভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে。

সহ -webkit- প্রিফিক্সের সংখ্যা এই প্রিফিক্সকে সমর্থন করা প্রথম সংস্করণকে নির্দেশ করে。

ইমেজ হিসাবে মাস্ক লেয়ার ব্যবহার করা

PNG বা SVG ইমেজকে মাস্ক লেয়ার হিসাবে ব্যবহার করতে, এইভাবে ব্যবহার করুন: url() মাস্ক লেয়ার ইমেজ হিসাবে মানদণ্ড পাঠানো

মাস্ক ইমেজকে স্পষ্ট বা অর্ধস্পষ্ট অঞ্চল ধারণ করতে হবে। কালো সম্পূর্ণরূপে স্পষ্ট হয়েছে。

এটি আমরা যেমন ব্যবহার করবো মাস্ক ইমেজ (PNG ইমেজ):

এটি ইতালীয় পাঁচটি মুসলিম গ্রাম ইমেজ:

এখন, আমরা মাস্ক ইমেজ (উপরের PNG ইমেজ) ইতালীয় পাঁচটি মুসলিম গ্রাম ইমেজের মাস্ক লেয়ার হিসাবে প্রয়োগ করবো:

প্রতিমান

মূল কোডঃ

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

উদাহরণ ব্যাখ্যা

mask-image এই প্রতিভাত্ত্বক হুইপুয়াং ছবিকে মাস্ক লেয়ার হিসাবে ব্যবহার করা হবে。

mask-repeat এই প্রতিভাত্ত্বক হুইপুয়াং ছবিকে পুনরাবৃত্তি করা হবে কিংবা কিভাবে পুনরাবৃত্তি করা হবে, no-repeat মান বলতে পুনরাবৃত্তি হবে না (মাস্ক ছবি কেবলমাত্র একবার দেখা যাবে)。

আরেকটি প্রদর্শন

যদি আমরা এটা ছেড়ে দিই: mask-repeat এই প্রতিভাত্ত্বক হুইপুয়াং ছবিতে পুনরাবৃত্তি করা হবে:

প্রতিমান

মূল কোডঃ

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

গ্রেডিয়েন্ট ব্যবহার করে মাস্ক লেয়ার:

CSS লাইনার ও রেডিয়াল গ্রেডিয়েন্টকেও মাস্ক ছবি হিসাবে ব্যবহার করা যেতে পারে。

লাইনার গ্রেডিয়েন্ট প্রদর্শন

এখানে, আমরা লাইনার গ্রেডিয়েন্ট ব্যবহার করে ছবির মাস্ক লেয়ার হিসাবে, এই লাইনার গ্রেডিয়েন্ট শীর্ষ থেকে (কালো) নীচে (স্পষ্ট) পর্যন্ত:

প্রতিমান

লাইনার গ্রেডিয়েন্ট ব্যবহার করে মাস্ক লেয়ার:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

এখানে, আমরা লাইনার গ্রেডিয়েন্ট এবং টেক্সট মাস্ক ব্যবহার করে ছবির মাস্ক লেয়ার হিসাবে:

প্রতিমান

লাইনার গ্রেডিয়েন্ট এবং টেক্সট মাস্ক ব্যবহার করে মাস্ক লেয়ার:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

রেডিয়াল গ্রেডিয়েন্ট প্রদর্শন

এখানে, আমরা সরকারী গ্রেডিয়েন্ট (বক্রাকার আকার) ব্যবহার করে ছবির মাস্ক লেয়ার হিসাবে:

প্রতিমান

সরকারী গ্রেডিয়েন্ট ব্যবহার করে মাস্ক লেয়ার (বক্রাকার):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

এখানে, আমরা ছবির মাস্ক হিসাবে রেডিয়াল গ্রেডিয়েন্ট (অবকাঠামো বৃত্তাকার) ব্যবহার করি:

প্রতিমান

আরেকটি রেডিয়াল গ্রেডিয়েন্ট (অবকাঠামো বৃত্তাকার) হিসাবে মাস্ক ব্যবহার করা:

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

এসভিজি মাস্ক ব্যবহার করা

এসভিজি <mask> এলিমেন্ট এসভিজি গ্রাফিক্স ইনসাইড ব্যবহার করা যেতে পারে, মাস্ক ইফেক্ট তৈরি করতে:

এখানে, আমরা এসভিজি <mask> এলিমেন্ট ব্যবহার করে ছবির বিভিন্ন মাস্ক তৈরি করি:

প্রতিমান

একটি সবুজ এসভিজি মাস্ক (রূপক্ষেত্র ত্রিকোণ):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

প্রতিমান

একটি সবুজ এসভিজি মাস্ক (রূপক্ষেত্র তারকা):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন

প্রতিমান

একটি সবুজ এসভিজি মাস্ক (রূপক্ষেত্র বৃত্তাকার):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

স্বয়ংক্রিয়ভাবে প্রয়াস করুন