CSS মাস্কিং আপনাকে একটি মাস্ক স্তর হিসাবে একটি চিত্র ব্যবহার করার বিকল্প দেয়। এর মানে হল যে আপনি একটি ছবি, একটি SVG, বা একটি গ্রেডিয়েন্ট আপনার মুখোশ হিসাবে ব্যবহার করতে পারেন, একটি চিত্র সম্পাদক ছাড়াই আকর্ষণীয় প্রভাব তৈরি করতে।
আপনি যখন clip-path বৈশিষ্ট্য ব্যবহার করে একটি উপাদান ক্লিপ করেন তখন ক্লিপ করা এলাকাটি অদৃশ্য হয়ে যায়। পরিবর্তে আপনি যদি ছবিটির অংশটিকে অস্বচ্ছ করতে চান বা এটিতে অন্য কোনও প্রভাব প্রয়োগ করতে চান তবে আপনাকে মাস্কিং ব্যবহার করতে হবে। এই পোস্টটি ব্যাখ্যা করে কিভাবে CSS-এ mask-image প্রপার্টি ব্যবহার করতে হয়, যা আপনাকে মাস্ক লেয়ার হিসেবে ব্যবহার করার জন্য একটি ইমেজ নির্দিষ্ট করতে দেয়। এটি আপনাকে তিনটি বিকল্প দেয়। আপনি আপনার মুখোশ, একটি SVG, বা একটি গ্রেডিয়েন্ট হিসাবে একটি চিত্র ফাইল ব্যবহার করতে পারেন।
ব্রাউজার সামঞ্জস্য
যদিও CSS মাস্কিং বেসলাইন নতুনভাবে উপলব্ধ, mask-image বেশিরভাগ বৈশিষ্ট্য পূর্ববর্তী ব্রাউজার সংস্করণে উপসর্গযুক্ত -webkit-mask-image ব্যবহার করে উপলব্ধ। নিম্নলিখিত উদাহরণগুলি দেখায় কিভাবে সেরা ব্রাউজার সমর্থনের জন্য উভয় বৈশিষ্ট্য একসাথে ব্যবহার করতে হয়।
একটি ইমেজ সঙ্গে মুখোশ
mask-image প্রপার্টি background-image প্রপার্টির অনুরূপভাবে কাজ করে। একটি ছবিতে পাস করার জন্য একটি url() মান ব্যবহার করুন। আপনার মাস্ক ইমেজ একটি স্বচ্ছ বা আধা-স্বচ্ছ এলাকা থাকা প্রয়োজন.
একটি সম্পূর্ণ স্বচ্ছ এলাকা সেই এলাকার নীচে ছবির অংশটিকে অদৃশ্য করে দেবে। আধা-স্বচ্ছ এমন একটি এলাকা ব্যবহার করলে কিছু আসল চিত্র দেখানোর অনুমতি দেবে। আপনি নিম্নলিখিত CodePen পার্থক্য দেখতে পারেন.
- প্রথম চিত্রটি মুখোশবিহীন বেলুনের আসল চিত্র।
- দ্বিতীয় ছবিতে একটি মাস্ক প্রয়োগ করা হয়েছে যার সম্পূর্ণ স্বচ্ছ ব্যাকগ্রাউন্ডে একটি সাদা তারা রয়েছে।
- তৃতীয় চিত্রটিতে গ্রেডিয়েন্ট স্বচ্ছতার সাথে একটি পটভূমিতে একটি সাদা তারা রয়েছে।
এই উদাহরণটি cover মান সহ mask-size বৈশিষ্ট্যও ব্যবহার করে। এই সম্পত্তি background-size হিসাবে একই ভাবে কাজ করে। কীওয়ার্ড cover ব্যবহার করুন এবং কোনো বৈধ দৈর্ঘ্য একক বা শতাংশ ব্যবহার করে ব্যাকগ্রাউন্ডকে একটি আকার দিন বা contain করুন।
আপনি আপনার মুখোশের পুনরাবৃত্তি করতে পারেন যেমন আপনি একটি পটভূমি চিত্র পুনরাবৃত্তি করতে পারেন, একটি পুনরাবৃত্তি প্যাটার্ন হিসাবে একটি ছোট চিত্র ব্যবহার করার জন্য।
SVG দিয়ে মাস্ক
মাস্ক হিসাবে একটি ইমেজ ফাইল ব্যবহার করার পরিবর্তে, আপনি SVG ব্যবহার করতে পারেন। এই অর্জন করা যেতে পারে উপায় একটি দম্পতি আছে. প্রথমটি হল SVG-এর ভিতরে একটি <mask> উপাদান থাকা এবং mask-image সম্পত্তিতে সেই উপাদানটির আইডি উল্লেখ করা।
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
এই পদ্ধতির সুবিধা হল যে মুখোশটি শুধুমাত্র একটি চিত্র নয়, যেকোনো HTML উপাদানে প্রয়োগ করা যেতে পারে।
একটি চিত্রকে মাস্ক করার সবচেয়ে সাধারণ দৃশ্যের জন্য, আপনি পরিবর্তে SVG-তে ছবিটি অন্তর্ভুক্ত করতে পারেন। প্রথম পন্থা হল বেসলাইন নতুনভাবে উপলব্ধ, SVG-তে ছবি সহ পুরানো ব্রাউজারগুলি দ্বারা সমর্থিত যা -webkit প্রিফিক্সড সংস্করণ সমর্থন করে।
একটি গ্রেডিয়েন্ট সঙ্গে মাস্ক
আপনার মুখোশ হিসাবে একটি CSS গ্রেডিয়েন্ট ব্যবহার করা একটি চিত্র বা SVG তৈরির ঝামেলা ছাড়াই একটি মুখোশযুক্ত এলাকা অর্জনের একটি মার্জিত উপায়।
একটি মুখোশ হিসাবে ব্যবহৃত একটি রৈখিক গ্রেডিয়েন্ট নিশ্চিত করতে পারে যে কোনও চিত্রের নীচের অংশটি ক্যাপশনের নীচে খুব বেশি অন্ধকার নয়, উদাহরণস্বরূপ।
আপনি সমর্থিত গ্রেডিয়েন্ট প্রকারের যেকোনো একটি ব্যবহার করতে পারেন এবং আপনার পছন্দ মতো সৃজনশীল হতে পারেন। এই পরবর্তী উদাহরণটি ক্যাপশনের পিছনে আলোকিত করার জন্য একটি বৃত্তাকার মুখোশ তৈরি করতে একটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করে।
একাধিক মুখোশ
পটভূমি চিত্রগুলির মতো আপনি একাধিক মুখোশের উত্স নির্দিষ্ট করতে পারেন, আপনার পছন্দ মতো প্রভাব পেতে সেগুলিকে একত্রিত করে। এটি বিশেষভাবে কার্যকর যদি আপনি আপনার মুখোশ হিসাবে CSS গ্রেডিয়েন্টের সাথে তৈরি একটি প্যাটার্ন ব্যবহার করতে চান। এগুলি সাধারণত একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবে এবং তাই একটি মাস্কে সহজেই অনুবাদ করা যেতে পারে।
উদাহরণ হিসেবে, 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 উপাদানগুলিতে আগ্রহ যোগ করার একটি উপায়।