CSS পডকাস্ট - 024: ব্লেন্ড মোড
ডুওটোন হল ফটোগ্রাফির জন্য একটি জনপ্রিয় কালার ট্রিটমেন্ট যা একটি ছবিকে এমন দেখায় যেন এটি শুধুমাত্র দুটি বিপরীত রং দিয়ে তৈরি: একটি হাইলাইটের জন্য এবং অন্যটি কম আলোর জন্য। যদিও আপনি সিএসএস দিয়ে এটি কীভাবে করবেন?
ব্লেন্ড মোড ব্যবহার করে—এবং অন্যান্য কৌশল যা আপনি শিখেছেন, যেমন ফিল্টার এবং সিউডো-এলিমেন্ট —আপনি যে কোনো ছবিতে এই প্রভাব প্রয়োগ করতে পারেন।
একটি মিশ্রণ মোড কি?
ব্লেন্ড মোডগুলি সাধারণত ফটোশপের মতো ডিজাইন টুলগুলিতে ব্যবহার করা হয় যাতে দুই বা ততোধিক স্তর থেকে রং মিশ্রিত করে একটি রচনামূলক প্রভাব তৈরি করা হয়। রঙগুলি কীভাবে মিশ্রিত হয় তা পরিবর্তন করে, আপনি সত্যিই আকর্ষণীয় ভিজ্যুয়াল প্রভাবগুলি অর্জন করতে পারেন। আপনি ইউটিলিটি হিসাবে মিশ্রন মোডগুলিও ব্যবহার করতে পারেন, যেমন একটি সাদা ব্যাকগ্রাউন্ড আছে এমন একটি চিত্রকে আলাদা করা, তাই এটি একটি স্বচ্ছ ব্যাকগ্রাউন্ড আছে বলে মনে হচ্ছে।
আপনি mix-blend-mode বা background-blend-mode বৈশিষ্ট্যগুলি ব্যবহার করে CSS-এর সাথে একটি ডিজাইন টুলে উপলব্ধ বেশিরভাগ মিশ্রণ মোড ব্যবহার করতে পারেন। mix-blend-mode একটি সম্পূর্ণ উপাদানে মিশ্রন প্রযোজ্য এবং background-blend-mode একটি উপাদানের পটভূমিতে মিশ্রন প্রযোজ্য।
আপনি background-blend-mode ব্যবহার করেন যখন আপনার একটি উপাদানে একাধিক ব্যাকগ্রাউন্ড থাকে এবং সেগুলিকে একে অপরের সাথে মিশে যেতে চান।
mix-blend-mode পুরো উপাদানকে প্রভাবিত করে, এর ছদ্ম-উপাদানগুলি সহ। একটি ব্যবহার-কেস একটি ডুওটোন চিত্রের প্রাথমিক উদাহরণে রয়েছে, যার রঙের স্তরগুলি উপাদানটির ছদ্ম-উপাদানগুলির মাধ্যমে প্রয়োগ করা হয়েছে।
ব্লেন্ড মোড দুটি বিভাগে পড়ে: বিভাজ্য এবং অ-বিভাজ্য। একটি পৃথকীকরণযোগ্য মিশ্রণ মোড প্রতিটি রঙের উপাদান, যেমন RGB, পৃথকভাবে বিবেচনা করে। একটি অ-বিভাজ্য মিশ্রণ মোড সমস্ত রঙের উপাদানকে সমানভাবে বিবেচনা করে।
ব্রাউজার সামঞ্জস্য
mix-blend-mode
background-blend-mode
বিভাজ্য মিশ্রণ মোড
স্বাভাবিক
এটি ডিফল্ট ব্লেন্ড মোড এবং একটি উপাদান কীভাবে অন্যদের সাথে মিশে যায় সে সম্পর্কে কিছুই পরিবর্তন করে না।
গুন করুন
multiply ব্লেন্ড মোডটি একে অপরের উপরে একাধিক স্বচ্ছতা স্ট্যাক করার মতো। সাদা পিক্সেল স্বচ্ছ প্রদর্শিত হবে, এবং কালো পিক্সেল কালো প্রদর্শিত হবে। মাঝখানের যে কোন কিছু তার দীপ্তি (আলো) মানকে বহুগুণ করবে। এর অর্থ হল আলোগুলি অনেক হালকা এবং অন্ধকার, গাঢ় হয় - প্রায়শই একটি গাঢ় ফলাফল তৈরি করে।
.my-element {
mix-blend-mode: multiply;
}
পর্দা
screen ব্যবহার করলে আলোর মানগুলি গুণিত হয়— multiply জন্য একটি বিপরীত প্রভাব, এবং প্রায়শই একটি উজ্জ্বল ফলাফল তৈরি করে।
.my-element {
mix-blend-mode: screen;
}
ওভারলে
এই ব্লেন্ড মোড— overlay — multiply এবং screen একত্রিত করে। বেস গাঢ় রং গাঢ় হয় এবং বেস হালকা রং হালকা হয়। মিড-রেঞ্জের রং, যেমন 50% ধূসর, প্রভাবিত হয় না।
.my-element {
mix-blend-mode: overlay;
}
অন্ধকার
darken ব্লেন্ড মোড সোর্স ইমেজ এবং ব্যাকড্রপ ইমেজের গাঢ় রঙের উজ্জ্বলতার তুলনা করে এবং দুটির মধ্যে সবচেয়ে অন্ধকার নির্বাচন করে। এটি প্রতিটি রঙের চ্যানেলের জন্য উজ্জ্বলতার পরিবর্তে rgb মানগুলির তুলনা করে (যেমন multiply এবং screen করবে)। darken এবং lighten সাথে, এই তুলনা প্রক্রিয়া থেকে প্রায়শই নতুন রঙের মান তৈরি করা হয়।
.my-element {
mix-blend-mode: darken;
}
হালকা করুন
lighten ব্যবহার করলে darken ঠিক বিপরীত হয়।
.my-element {
mix-blend-mode: lighten;
}
রঙ ডজ
আপনি color-dodge ব্যবহার করলে, এটি উৎসের রঙ প্রতিফলিত করতে পটভূমির রঙ হালকা করে। বিশুদ্ধ কালো রং এই মোড থেকে কোন প্রভাব দেখতে না.
.my-element {
mix-blend-mode: color-dodge;
}
রঙ পুড়ে
color-burn ব্লেন্ড মোডটি multiply ব্লেন্ড মোডের অনুরূপ, কিন্তু বৈসাদৃশ্য বাড়ায়, ফলে আরও বেশি স্যাচুরেটেড মিড-টোন এবং হাইলাইট কমে যায়।
.my-element {
mix-blend-mode: color-burn;
}
কঠিন আলো
hard-light ব্যবহার করা একটি প্রাণবন্ত বৈসাদৃশ্য তৈরি করে। এই ব্লেন্ড মোডটি হয় স্ক্রীন বা উজ্জ্বলতার মানকে বহুগুণ করে। যদি পিক্সেলের মান 50% ধূসরের চেয়ে হালকা হয়, তাহলে ছবিটি হালকা করা হয়, যেন এটি স্ক্রীন করা হয়েছে। যদি এটি গাঢ় হয়, এটি গুণিত হয়।
.my-element {
mix-blend-mode: hard-light;
}
মৃদু আলো
soft-light মিশ্রন মোড overlay -এর একটি কম-কঠোর সংস্করণ। এটি কম বৈসাদৃশ্যের সাথে একইভাবে কাজ করে।
.my-element {
mix-blend-mode: soft-light;
}
পার্থক্য
difference কীভাবে কাজ করে তা চিত্র করার একটি ভাল উপায় হল একটি ফটো নেতিবাচক কীভাবে কাজ করে। difference মিশ্রন মোড প্রতিটি পিক্সেলের পার্থক্য মান নেয়, হালকা রঙগুলিকে উল্টে দেয়। রঙের মান অভিন্ন হলে, তারা কালো হয়ে যায়। মানের পার্থক্য উল্টে যাবে।
.my-element {
mix-blend-mode: difference;
}
বর্জন
exclusion ব্যবহার করা difference সাথে খুব মিল, কিন্তু অভিন্ন পিক্সেলের জন্য কালো ফেরানোর পরিবর্তে, এটি 50% ধূসর ফেরত দেবে, যার ফলে কম বৈসাদৃশ্য সহ একটি নরম আউটপুট হবে।
.my-element {
mix-blend-mode: exclusion;
}
অ-বিভাজ্য মিশ্রণ মোড
আপনি এইচএসএল রঙের উপাদানগুলির মতো এই মিশ্রণ মোডগুলির কথা ভাবতে পারেন। প্রতিটি সক্রিয় স্তর থেকে একটি নির্দিষ্ট উপাদান মান নেয় এবং অন্যান্য উপাদান মানের সাথে এটি মিশ্রিত করে।
হিউ
hue ব্লেন্ড মোড সোর্স রঙের হিউ নেয় এবং এটি ব্যাকড্রপ রঙের স্যাচুরেশন এবং উজ্জ্বলতায় প্রয়োগ করে।
.my-element {
mix-blend-mode: hue;
}
স্যাচুরেশন
এটি hue এর মত কাজ করে, কিন্তু ব্লেন্ড মোড হিসাবে saturation ব্যবহার করে পটভূমির রঙের আভা এবং উজ্জ্বলতায় উৎস রঙের সম্পৃক্তি প্রয়োগ করে।
.my-element {
mix-blend-mode: saturation;
}
রঙ
color ব্লেন্ড মোড সোর্স রঙের হিউ এবং স্যাচুরেশন এবং ব্যাকড্রপ রঙের উজ্জ্বলতা থেকে একটি রঙ তৈরি করবে।
.my-element {
mix-blend-mode: color;
}
উজ্জ্বলতা
সবশেষে, luminosity হল color বিপরীত। এটি উত্স রঙের উজ্জ্বলতা এবং পটভূমির রঙের রঙ এবং স্যাচুরেশনের সাথে একটি রঙ তৈরি করে।
.my-element {
mix-blend-mode: luminosity;
}
isolation সম্পত্তি
আপনি যদি isolation বৈশিষ্ট্যটিকে isolate এর মান রাখতে সেট করেন তবে এটি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করবে, যা এটিকে একটি ব্যাকড্রপ স্তরের সাথে মিশ্রিত হতে বাধা দেবে। আপনি যেমন z-index মডিউলে শিখেছেন, যখন আপনি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করেন, সেই স্তরটি বেস লেয়ারে পরিণত হয়। এর মানে হল যে অভিভাবক-স্তরের মিশ্রন মোডগুলি আর প্রযোজ্য হবে না, তবে isolation: isolate সেট এখনও মিশ্রিত হতে পারে।
মনে রাখবেন এটি background-blend-mode সাথে কাজ করে না কারণ ব্যাকগ্রাউন্ড প্রপার্টি ইতিমধ্যেই বিচ্ছিন্ন।
আপনার উপলব্ধি পরীক্ষা করুন
ব্লেন্ড-মোড সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন
নিচের কোনটি CSS ব্লেন্ড মোড?
আপনি যদি বিভিন্ন উপায়ে বিভিন্ন রং মিশ্রিত করতে চান, তাহলে আপনার কোন স্টাইলের ব্লেন্ড মোড লাগবে?