ভিজ্যুয়াল টেক্সচার কন্টেন্ট

ওয়েব ফিচার: মাস্ক

এক নজরে

কোনও এলিমেন্টে বাস্তবসম্মত ওয়েদারিং বা টেক্সচার প্যাটার্ন (যেমন গ্রাঞ্জ, নয়েজ বা পেপার টেক্সচার) প্রয়োগ করতে, রিপিটিং টেক্সচার ইমেজ সহ CSS মাস্কিং (mask-image) ব্যবহার করুন। এটি আপনাকে কন্টেন্টের উপরে শুধু টেক্সচার ওভারলে করার পরিবর্তে, কন্টেন্টের কিছু অংশ সেমি-ট্রান্সপারেন্ট করে কন্টেন্টকে টেক্সচার্ড হিসেবে দেখাতে সাহায্য করে। এটি আরও বাস্তবসম্মত ফিজিক্যাল মেটেরিয়াল তৈরি করে।

প্রয়োগ

টেক্সচার প্যাটার্ন প্রয়োগ করতে:

বাস্তবসম্মত টেক্সচারের জন্য এটি সবচেয়ে সাধারণ পদ্ধতি।

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

পদ্ধতি ২: জ্যামিতিক প্যাটার্নের জন্য CSS গ্রেডিয়েন্ট ব্যবহার করা

আপনি CSS গ্রেডিয়েন্ট ব্যবহার করে প্যাটার্ন তৈরি করতে পারবেন। এটি স্বয়ংসম্পূর্ণ এবং এর জন্য এক্সটার্নাল ছবির ফাইলের প্রয়োজন হয় না।

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

আলফা বনাম লুমিন্যান্স মাস্কিং মোড

ডিফল্ট হিসেবে, CSS মাস্ক mask-mode: match-source ব্যবহার করে। এর অর্থ হল, আপনি কী ধরনের সোর্স প্রদান করছেন তার উপর ভিত্তি করে ব্রাউজার অটোমেটিক সিদ্ধান্ত নেয় যে মাস্কের আলফা চ্যানেল (স্বচ্ছতা) নাকি লুমিন্যান্স (উজ্জ্বলতা) ব্যবহার করা হবে:

মাস্ক সোর্সের ধরন ডিফল্ট মাস্ক মোড মাস্কিং আচরণ
ইনলাইন SVG <mask> এলিমেন্ট luminance রঙের উজ্জ্বলতা অনুযায়ী অপাসিটি নির্ধারণ করা হয়। সাদা কন্টেন্ট দেখায়, কালো এটি লুকায় এবং ধূসর আংশিক-স্বচ্ছতা তৈরি করে।
সরাসরি ছবির ফাইল (যেমন, PNG, SVG ফাইল) alpha স্বচ্ছতার মাধ্যমে অপাসিটি নির্ধারণ করা হয়। অস্বচ্ছ অংশ কন্টেন্ট দেখায় এবং স্বচ্ছ অংশ এটি লুকায়।
CSS গ্রেডিয়েন্ট alpha স্বচ্ছতার মাধ্যমে অপাসিটি নির্ধারণ করা হয়। অস্বচ্ছ রঙ (যেমন black) কন্টেন্ট দেখায় এবং স্বচ্ছ রঙ এটি লুকায়।

ফলব্যাক স্ট্র্যাটেজি

কোনও ব্রাউজারে mask-image বা প্রিফিক্সড ভার্সন কাজ না করলে:

  • এলিমেন্টটি টেক্সচার ছাড়াই (পরিষ্কার এবং সলিড ফিল) দেখা যাবে।
  • টেক্সচার ছাড়াই কন্টেন্ট যাতে পড়া যায় তা নিশ্চিত করুন (প্রোগ্রেসিভ এনহ্যান্সমেন্ট)।
  • টেক্সচার সিমুলেট করার জন্য আপনি ব্যাকগ্রাউন্ড ইমেজ বা ওভারলে ব্যবহার করতে পারেন, যদিও এটি কন্টেন্টের ট্রান্সপারেন্সির উপর কোনও প্রভাব ফেলবে না।
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}