আপনি যখন একটি ওয়েবসাইট ডিজাইন করছেন, তখন আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একটি নির্দিষ্ট ছবিতে একটি অস্পষ্ট প্রভাব যুক্ত করতে চান। উদাহরণস্বরূপ, আপনি যদি একটি কফি হাউসের জন্য একটি ওয়েবসাইট ডিজাইন করেন, তাহলে আপনি একটি চিত্র অস্পষ্ট করতে চাইতে পারেন যাতে আপনি ব্যবহারকারীর পড়ার জন্য চিত্রের সামনে পাঠ্য রাখতে পারেন।
এখানেই CSS ব্লার ফাংশনটি আসে। ব্লার ফাংশনটি একটি নির্দিষ্ট ইনপুট ইমেজে একটি ব্লার ইফেক্ট প্রয়োগ করে, যেটি আপনি একটি ইমেজ ব্লার করার জন্য "ফিল্টার" প্রপার্টি ব্যবহার করতে পারেন।
এই টিউটোরিয়ালটি আলোচনা করবে, একটি উদাহরণ, CSS ব্লার ফাংশনের মূল বিষয় এবং কীভাবে আপনি এটি ব্যবহার করে আপনার কোডের একটি ছবিতে একটি অস্পষ্ট প্রভাব প্রয়োগ করতে পারেন। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS ব্লার ফাংশন ব্যবহারে একজন বিশেষজ্ঞ হয়ে উঠবেন।
CSS ফিল্টার
CSS ফিল্টার প্রপার্টি আপনাকে ওয়েব পৃষ্ঠার একটি উপাদানে গ্রাফিকাল প্রভাব প্রয়োগ করতে দেয়। প্রায়শই, ফিল্টার বৈশিষ্ট্যটি একটি ওয়েব পৃষ্ঠায় চিত্র এবং ব্যাকগ্রাউন্ডে ফিল্টার প্রয়োগ করতে ব্যবহৃত হয়।
CSS দ্বারা অফার করা বিভিন্ন ফিল্টার আছে। উদাহরণস্বরূপ, অপাসিটি ফিল্টার আপনাকে একটি উপাদানকে কম-বেশি দৃশ্যমান করতে দেয় এবং ড্রপ-শ্যাডো ফিল্টার আপনাকে ওয়েব পৃষ্ঠায় একটি উপাদানের নীচে একটি ছায়া যোগ করতে দেয়।
ফিল্টার প্রয়োগের জন্য বাক্য গঠন নিম্নরূপ:
filter: filterName(arguments);
এই টিউটোরিয়ালের জন্য, আমরা CSS ব্লার ফাংশনের উপর ফোকাস করতে যাচ্ছি, যা একটি ছবিতে একটি অস্পষ্ট প্রভাব যুক্ত করে।
CSS ব্লার
CSS ব্লার ফিল্টার হল একটি ফিল্টার ফাংশন যা একটি ইমেজে ব্লার ইফেক্ট যোগ করে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
ব্লার ফিল্টার ব্যবহারের জন্য সিনট্যাক্স নিম্নরূপ:
filter: blur(radius);
এই সিনট্যাক্সে, "ব্যাসার্ধ" অস্পষ্ট প্রভাবের ব্যাসার্ধকে বোঝায় যা প্রয়োগ করা উচিত। আপনি যত বড় ব্যাসার্ধ মান নির্দিষ্ট করবেন, একটি চিত্র উপাদানে যোগ করা অস্পষ্টতা তত বেশি হবে। আপনি যদি "0" মানটি নির্দিষ্ট করেন, তাহলে শৈলীটি প্রয়োগ করা ছবির উপাদানটিতে কোনো অস্পষ্টতা যোগ করা হবে না।
আপনার নির্দিষ্ট করা ব্যাসার্ধের মান যেকোনো দৈর্ঘ্যের মান গ্রহণ করতে পারে, যেমন em, px, rem, এবং cm।
এই ফাংশনটি কীভাবে কাজ করে তা ব্যাখ্যা করার জন্য একটি উদাহরণ দিয়ে চলুন। ধরুন আমরা একটি স্থানীয় কফি হাউসের জন্য একটি ওয়েব সাইট ডিজাইন করছি। কফি হাউসের হোম পেজে, তারা একটি কফির একটি স্টক চিত্র দেখতে চায়। যাইহোক, তারা চায় যে ছবিটি 2px ব্যাসার্ধের সাথে একটি অস্পষ্ট প্রভাবের সাথে প্রদর্শিত হোক।
এই কাজটি সম্পন্ন করতে আমরা ব্লার ফাংশন এবং ফিল্টার প্রপার্টি ব্যবহার করতে পারি। ব্লার ফাংশন সহ এমন একটি চিত্র তৈরি করতে আমরা যে কোডটি ব্যবহার করতে পারি তা এখানে:
<html>
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" height="400" width="600" />
</html>
<style>
img {
filter: blur(2px);
}
</style>
আমাদের কোড ফিরে আসে:
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের HTML ফাইলে, আমরা আমাদের ওয়েব পেজে একটি ছবি যোগ করার জন্য একটি ট্যাগ ব্যবহার করেছি। এই ছবিটি একটি কফির একটি স্টক ছবির সাথে লিঙ্ক করে৷ আমরা আমাদের ছবির উচ্চতা এবং প্রস্থ যথাক্রমে 400px এবং 600px সেট করতে "উচ্চতা" এবং "প্রস্থ" পরামিতি ব্যবহার করি।
আমাদের CSS কোডে, আমরা আমাদের ওয়েব পৃষ্ঠার সমস্ত ট্যাগে একটি অস্পষ্ট প্রভাব প্রয়োগ করতে ফিল্টার বৈশিষ্ট্য এবং ব্লার ফাংশন ব্যবহার করি। এই ক্ষেত্রে, আমরা 2px এর একটি অস্পষ্ট ব্যাসার্ধ নির্দিষ্ট করি, যা আমাদের ছবিতে সামান্য অস্পষ্ট প্রভাব যুক্ত করে। আপনি উপরে দেখতে পাচ্ছেন, আমরা যে কফি কাপটি ব্যবহার করছি তার চিত্রটি কিছুটা ঝাপসা দেখায় কারণ আমরা ব্লার ইফেক্ট ব্যবহার করেছি।
বিকল্পভাবে, যদি আমরা পরিমাপের অন্য একক ব্যবহার করে একটি অস্পষ্ট ব্যাসার্ধ নির্দিষ্ট করতে চাই, তাহলে আমরা যে মানটি ব্যবহার করতে চাই তার সাথে "2px" প্রতিস্থাপন করে তা করতে পারি। তাই, যদি আমরা চাই যে আমাদের ছবিটি 1.15em ব্লার ব্যাসার্ধের সাথে একটি অস্পষ্ট হোক, আমরা উপরে উল্লেখিত "2px" ব্লার ব্যাসার্ধটি প্রতিস্থাপন করে তা করতে পারি।
উপসংহার
CSS ব্লার ফাংশন আপনাকে ওয়েব পৃষ্ঠায় একটি ইমেজ উপাদানের জন্য একটি অস্পষ্টতা তৈরি করতে দেয়। এই ফাংশনটি একটি ছবিতে অস্পষ্ট প্রভাব প্রয়োগ করতে ফিল্টার বৈশিষ্ট্যের সাথে একত্রে ব্যবহৃত হয়।
এই টিউটোরিয়ালে CSS ফিল্টারগুলির মূল বিষয়গুলি এবং একটি ওয়েব পৃষ্ঠায় একটি ছবিতে একটি অস্পষ্ট প্রভাব যুক্ত করতে কীভাবে ব্লার ফাংশন ব্যবহার করতে হয় তা নিয়ে আলোচনা করা হয়েছে। এখন আপনি একজন পেশাদারের মতো ছবিতে অস্পষ্ট প্রভাব যুক্ত করার জন্য প্রয়োজনীয় জ্ঞানের সাথে সজ্জিত!
