CSS-এর মাস্ক-ইমেজ সম্পত্তি সহ চিত্রগুলিতে প্রভাব প্রয়োগ করুন

CSS মাস্কিং আপনাকে একটি মাস্ক স্তর হিসাবে একটি চিত্র ব্যবহার করার বিকল্প দেয়। এর মানে হল যে আপনি একটি ছবি, একটি SVG, বা একটি গ্রেডিয়েন্ট আপনার মুখোশ হিসাবে ব্যবহার করতে পারেন, একটি চিত্র সম্পাদক ছাড়াই আকর্ষণীয় প্রভাব তৈরি করতে।

Rachel Andrew

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

ব্রাউজার সামঞ্জস্য

বেশিরভাগ ব্রাউজারে শুধুমাত্র স্ট্যান্ডার্ড CSS মাস্কিং সম্পত্তির জন্য আংশিক সমর্থন আছে। সর্বোত্তম ব্রাউজার সামঞ্জস্য অর্জনের জন্য আপনাকে স্ট্যান্ডার্ড সম্পত্তি ছাড়াও -webkit- উপসর্গ ব্যবহার করতে হবে। দেখুন আমি কি CSS মাস্ক ব্যবহার করতে পারি? সম্পূর্ণ ব্রাউজার সমর্থন তথ্যের জন্য।

প্রিফিক্সড প্রপার্টি ব্যবহার করে ব্রাউজার সাপোর্ট করা ভালো, মাস্কিং ব্যবহার করার সময় একটি ছবির উপরে টেক্সট দৃশ্যমান করার জন্য মাস্কিং অনুপলব্ধ হলে কি হবে সেদিকে খেয়াল রাখুন। mask-image বা -webkit-mask-image জন্য সমর্থন সনাক্ত করতে এবং আপনার মুখোশযুক্ত সংস্করণ যোগ করার আগে একটি পঠনযোগ্য ফলব্যাক প্রদান করার জন্য বৈশিষ্ট্য প্রশ্নগুলি ব্যবহার করা মূল্যবান হতে পারে।

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

একটি ইমেজ সঙ্গে মাস্কিং

mask-image প্রপার্টি background-image প্রপার্টির অনুরূপভাবে কাজ করে। একটি ছবিতে পাস করার জন্য একটি url() মান ব্যবহার করুন। আপনার মাস্ক ইমেজ একটি স্বচ্ছ বা আধা-স্বচ্ছ এলাকা থাকা প্রয়োজন.

একটি সম্পূর্ণ স্বচ্ছ এলাকা সেই এলাকার নীচে ছবির অংশটিকে অদৃশ্য করে দেবে। আধা-স্বচ্ছ এমন একটি এলাকা ব্যবহার করলে কিছু আসল চিত্র দেখানোর অনুমতি দেবে। আপনি নীচের সমস্যা মধ্যে পার্থক্য দেখতে পারেন. প্রথম চিত্রটি মুখোশবিহীন বেলুনের আসল চিত্র। দ্বিতীয় ছবিতে একটি মাস্ক প্রয়োগ করা হয়েছে যার সম্পূর্ণ স্বচ্ছ ব্যাকগ্রাউন্ডে একটি সাদা তারা রয়েছে। তৃতীয় চিত্রটিতে গ্রেডিয়েন্ট স্বচ্ছতার সাথে একটি পটভূমিতে একটি সাদা তারা রয়েছে।

এই উদাহরণে আমি cover মান সহ mask-size সম্পত্তি ব্যবহার করছি। এই সম্পত্তি background-size হিসাবে একই ভাবে কাজ করে। আপনি কীওয়ার্ড cover ব্যবহার করতে পারেন এবং contain পারেন বা আপনি যেকোন বৈধ দৈর্ঘ্য একক বা শতাংশ ব্যবহার করে ব্যাকগ্রাউন্ডকে একটি আকার দিতে পারেন।

আপনি আপনার মুখোশের পুনরাবৃত্তি করতে পারেন যেমন আপনি একটি পটভূমি চিত্র পুনরাবৃত্তি করতে পারেন, একটি পুনরাবৃত্তি প্যাটার্ন হিসাবে একটি ছোট চিত্র ব্যবহার করার জন্য।

SVG দিয়ে মাস্কিং

মাস্ক হিসাবে একটি ইমেজ ফাইল ব্যবহার করার পরিবর্তে, আপনি SVG ব্যবহার করতে পারেন। এই অর্জন করা যেতে পারে উপায় একটি দম্পতি আছে. প্রথমটি হল SVG-এর ভিতরে একটি <mask> উপাদান থাকা এবং mask-image সম্পত্তিতে সেই উপাদানটির আইডি উল্লেখ করা।

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

এই পদ্ধতির সুবিধা হল যে মুখোশটি শুধুমাত্র একটি চিত্র নয়, যেকোনো HTML উপাদানে প্রয়োগ করা যেতে পারে। দুর্ভাগ্যবশত ফায়ারফক্স একমাত্র ব্রাউজার যা এই পদ্ধতিকে সমর্থন করে।

যাইহোক, সমস্ত কিছু হারিয়ে যায় না, একটি চিত্র মাস্ক করার সবচেয়ে সাধারণ দৃশ্যের জন্য, আমরা ছবিটিকে SVG-তে অন্তর্ভুক্ত করতে পারি।

একটি গ্রেডিয়েন্ট সঙ্গে মাস্কিং

আপনার মুখোশ হিসাবে একটি CSS গ্রেডিয়েন্ট ব্যবহার করা একটি চিত্র বা SVG তৈরির ঝামেলা ছাড়াই একটি মুখোশযুক্ত এলাকা অর্জনের একটি মার্জিত উপায়।

একটি মুখোশ হিসাবে ব্যবহৃত একটি সাধারণ রৈখিক গ্রেডিয়েন্ট নিশ্চিত করতে পারে যে কোনও চিত্রের নীচের অংশটি ক্যাপশনের নীচে খুব বেশি অন্ধকার হবে না, উদাহরণস্বরূপ।

আপনি সমর্থিত গ্রেডিয়েন্ট প্রকারের যেকোনো একটি ব্যবহার করতে পারেন এবং আপনার পছন্দ মতো সৃজনশীল হতে পারেন। এই পরবর্তী উদাহরণটি ক্যাপশনের পিছনে আলোকিত করার জন্য একটি বৃত্তাকার মুখোশ তৈরি করতে একটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করে।

একাধিক মাস্ক ব্যবহার করা

পটভূমি চিত্রগুলির মতো আপনি একাধিক মুখোশের উত্স নির্দিষ্ট করতে পারেন, আপনার পছন্দ মতো প্রভাব পেতে সেগুলিকে একত্রিত করে। এটি বিশেষভাবে কার্যকর যদি আপনি আপনার মুখোশ হিসাবে CSS গ্রেডিয়েন্টের সাথে তৈরি একটি প্যাটার্ন ব্যবহার করতে চান। এগুলি সাধারণত একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবে এবং তাই একটি মাস্কে সহজেই অনুবাদ করা যেতে পারে।

একটি উদাহরণ হিসাবে, আমি এই নিবন্ধে একটি চমৎকার চেকারবোর্ড প্যাটার্ন খুঁজে পেয়েছি। কোড, ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করে, এই মত দেখায়:

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

এটিকে, বা পটভূমি চিত্রগুলির জন্য ডিজাইন করা অন্য কোনও প্যাটার্নকে একটি মাস্কে পরিণত করতে, আপনাকে background-* বৈশিষ্ট্যগুলিকে প্রাসঙ্গিক mask বৈশিষ্ট্যগুলির সাথে প্রতিস্থাপন করতে হবে, যার মধ্যে -webkit প্রিফিক্সড রয়েছে৷

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

চিত্রগুলিতে গ্রেডিয়েন্ট প্যাটার্ন প্রয়োগ করে কিছু সত্যিই চমৎকার প্রভাব তৈরি করা যেতে পারে। গ্লিচ রিমিক্স করার চেষ্টা করুন এবং কিছু অন্যান্য বৈচিত্র পরীক্ষা করে দেখুন।

ক্লিপিংয়ের পাশাপাশি, CSS মাস্কগুলি গ্রাফিক্স অ্যাপ্লিকেশন ব্যবহার করার প্রয়োজন ছাড়াই চিত্র এবং অন্যান্য HTML উপাদানগুলিতে আগ্রহ যোগ করার একটি উপায়।

আনস্প্ল্যাশে জুলিও রিওনালদোর ছবি ।