CSS mix-blend-mode প্রোপার্টি দিয়ে এলিমেন্ট ও ব্যাকগ্রাউন্ড ব্লেন্ড করা

mix-blend-mode প্রোপার্টি নির্ধারণ করে যে একটি এলিমেন্টের কন্টেন্ট তার প্যারেন্টের ব্যাকগ্রাউন্ডের সাথে কীভাবে ব্লেন্ড (মিশ্রণ) হবে। এটি ফটোশপের ব্লেন্ডিং মোডের মতো কাজ করে।

প্রধান মানগুলো:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | difference | exclusion |
hue | saturation | color | luminosity

উদাহরণ ১: normal, darken, lighten, hue

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container { height: 800px; background-color: brown; }
img { width: 33.3%; height: auto; float: left; }
.demo1 { mix-blend-mode: normal; }
.demo2 { mix-blend-mode: darken; }
.demo3 { mix-blend-mode: lighten; }
.demo4 { mix-blend-mode: hue; }
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
  <img src="..." alt="Xamarin" class="demo1" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo2" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo3" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Note:</strong> mix-blend-mode Internet Explorer বা Edge-এ সমর্থিত নয়।</p>
</body>
</html>

উদাহরণ ২: color-dodge, color-burn, exclusion, saturation

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container { height: 800px; background-color: brown; }
img { width: 33.3%; height: auto; float: left; }
.demo1 { mix-blend-mode: color-dodge; }
.demo2 { mix-blend-mode: color-burn; }
.demo3 { mix-blend-mode: exclusion; }
.demo4 { mix-blend-mode: saturation; }
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
  <img src="..." alt="Xamarin" class="demo1" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo2" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo3" width="300" height="300">
  <img src="..." alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Note:</strong> mix-blend-mode Internet Explorer বা Edge-এ সমর্থিত নয়।</p>
</body>
</html>

ব্যবহার: ইমেজ ওভারলে, ক্রিয়েটিভ টাইপোগ্রাফি, হোভার ইফেক্টে এটি খুবই কার্যকর।