যখন আপনি একটি ওয়েবসাইট ডিজাইন করছেন, তখন আপনি একটি নির্দিষ্ট ইমেজে ব্লার ইফেক্ট (blur effect) যোগ করতে সিদ্ধান্ত নিতে পারেন। উদাহরণস্বরূপ, আপনি যদি একটি কফি হাউসের জন্য ওয়েবসাইট ডিজাইন করছেন, তবে আপনি একটি ইমেজ ব্লার করতে চাইতে পারেন যাতে আপনি ইমেজের সামনে পাঠ্য রাখতে পারেন যা ব্যবহারকারী পড়তে পারবে।
এখানেই CSS blur ফাংশন কাজে আসে। blur ফাংশন একটি নির্দিষ্ট ইনপুট ইমেজে ব্লার ইফেক্ট প্রযোজ্য করে, যা আপনি পরবর্তীতে "filter" প্রোপার্টি ব্যবহার করে একটি ইমেজ ব্লার করতে পারেন।
এই টিউটোরিয়ালে উদাহরণসহ CSS blur ফাংশনের বেসিক এবং আপনি আপনার কোডে একটি ইমেজে ব্লার ইফেক্ট প্রযোজ্য করতে এটি কীভাবে ব্যবহার করতে পারেন তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS blur ফাংশন ব্যবহারে এক্সপার্ট হবেন।
CSS ফিল্টার (Filter)
CSS filter প্রোপার্টি আপনাকে একটি ওয়েব পেজের একটি এলিমেন্টে গ্রাফিক্যাল ইফেক্ট প্রযোজ্য করতে দেয়। প্রায়শই, filter প্রোপার্টি একটি ওয়েব পেজের ইমেজ এবং ব্যাকগ্রাউন্ডে ফিল্টার প্রযোজ্য করতে ব্যবহৃত হয়।
CSS দ্বারা প্রদত্ত অনেক ভিন্ন ফিল্টার রয়েছে। উদাহরণস্বরূপ, opacity ফিল্টার আপনাকে একটি এলিমেন্টকে অধিক বা কম দৃশ্যমান করতে দেয়, এবং drop-shadow ফিল্টার আপনাকে একটি ওয়েব পেজের একটি এলিমেন্টের নিচে ছায়া যোগ করতে দেয়।
একটি ফিল্টার প্রযোজ্য করার সিনট্যাক্স নিম্নরূপ:
filter: filterName(arguments);এই টিউটোরিয়ালের জন্য, আমরা CSS blur ফাংশনের ওপর ফোকাস করব, যা একটি ইমেজে ব্লার ইফেক্ট যোগ করে।
CSS ব্লার (Blur)
CSS blur ফিল্টার একটি ফিল্টার ফাংশন যা একটি ইমেজে ব্লার ইফেক্ট যোগ করে।
blur ফিল্টার ব্যবহারের সিনট্যাক্স নিম্নরূপ:
filter: blur(radius);এই সিনট্যাক্সে, "radius" ব্লার ইফেক্টের ত্রিজ্যা বোঝায় যা প্রযোজ্য করা উচিত। আপনি যত বড় radius মান নির্দিষ্ট করবেন, ইমেজ এলিমেন্টে যোগ করা ব্লার ততই तीক্ষ্ণ হবে। আপনি যদি মান "0" নির্দিষ্ট করেন, তবে যে এলিমেন্টে স্টাইল প্রযোজ্য করা হয়েছে সেটিতে কোনো ব্লার যোগ হবে না।
আপনি যা radius মান নির্দিষ্ট করবেন সেটি যেকোনো লেন্থ মান গ্রহণ করতে পারে, যেমন em, px, rem, এবং cm।
চলুন একটি উদাহরণের মাধ্যমে এই ফাংশন কীভাবে কাজ করে তা ব্যাখ্যা করি। মান লইজिए আমরা একটি স্থানীয় কফি হাউসের জন্য একটি ওয়েব সাইট ডিজাইন করছি। কফি হাউসের হোম পেজে, তারা একটি কফির স্টক ইমেজ দেখাতে চায়। যাইহোক, তারা চায় যে ইমেজটি 2px রেডিাসের একটি ব্লার ইফেক্ট সহ দেখাবে।
আমরা blur ফাংশন এবং filter প্রোপার্টি ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি। এখানে যে কোডটি আমরা ব্যবহার করতে পারি একটি ব্লার ফাংশনসহ এরকম একটি ইমেজ তৈরি করার জন্য:
<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 ফাইলে, আমরা আমাদের ওয়েব পেজে একটি ইমেজ যোগ করতে <img> ট্যাগ ব্যবহার করেছি। এই ইমেজ একটি কফির স্টক ইমেজের সাথে লিংক করা। আমরা "height" এবং "width" প্যারামিটার ব্যবহার করে আমাদের ইমেজের উচ্চতা এবং প্রস্থ 400px এবং 600px সেট করেছি।
আমাদের CSS কোডে, আমরা filter প্রোপার্টি এবং blur ফাংশন ব্যবহার করেছি আমাদের ওয়েব পেজের সকল <img> ট্যাগে ব্লার ইফেক্ট প্রযোজ্য করতে। এই কেসে, আমরা 2px ব্লার রেডিাস নির্দিষ্ট করেছি, যা আমাদের ইমেজে একটি হালকা ব্লার ইফেক্ট যোগ করে। আপনি উপরে দেখতে পারেন, যে কফি কাপের ইমেজটি আমরা ব্যবহার করছি সেটি কিছুটা ব্লার দেখাচ্ছে কারণ আমরা ব্লার ইফেক্ট ব্যবহার করেছি।
বিকল্পভাবে, আপনি যদি অন্য কোনো মাপ একক ব্যবহার করে ব্লার রেডিাস নির্দিষ্ট করতে চান, তবে আপনি "2px" কে আপনি যে মানটি ব্যবহার করতে চান সেটি দিয়ে রিপ্লেস করে তা করতে পারেন। সুতরাং, আপনি যদি আপনার ইমেজে 1.15em ব্লার রেডিাস চান, তবে আপনি উপরে নির্দিষ্ট করা "2px" ব্লার রেডিাসকে রিপ্লেস করে তা করতে পারেন।
উপসংহার (Conclusion)
CSS blur ফাংশন আপনাকে একটি ওয়েব পেজের একটি ইমেজ এলিমেন্টের জন্য ব্লার তৈরি করতে দেয়। এই ফাংশন filter প্রোপার্টির সাথে কম্বাইন করে ব্যবহার করা হয় ব্লার ইফেক্ট একটি ইমেজে প্রযোজ্য করার জন্য।
এই টিউটোরিয়ালে CSS ফিল্টারসের বেসিক এবং একটি ওয়েব পেজের একটি ইমেজে ব্লার ইফেক্ট যোগ করতে blur ফাংশন কীভাবে ব্যবহার করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি পেশাদারের মত একটি ইমেজে ব্লার ইফেক্ট যোগ করার জ্ঞান দিয়ে সাজ্জিত!
