ফিল্টার

CSS পডকাস্ট - 023: ফিল্টার

বলুন আপনাকে এমন একটি উপাদান তৈরি করতে হবে যা একটি সামান্য অস্বচ্ছ, হিমায়িত কাচের প্রভাব পেয়েছে যা একটি চিত্রের শীর্ষে বসে। পাঠ্যটি লাইভ পাঠ্য হতে হবে এবং একটি চিত্র নয়। আপনি এটা কিভাবে করবেন?

CSS ফিল্টার এবং backdrop-filter সংমিশ্রণ আমাদের প্রভাব প্রয়োগ করতে এবং বাস্তব সময়ে যা প্রয়োজন তা অস্পষ্ট করতে দেয়। অস্পষ্টতা এবং অস্বচ্ছতা অনেকগুলি উপলব্ধ ফিল্টারগুলির মধ্যে দুটি, তাই আসুন এগুলি কী করে এবং কীভাবে সেগুলি ব্যবহার করতে হয় তা নিয়ে দ্রুত দৌড়ানো যাক৷

filter বৈশিষ্ট্য

Browser Support

  • ক্রোম: 53।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 9.1।

Source

আপনি filter মান হিসেবে নিচের এক বা একাধিক ফিল্টার প্রয়োগ করতে পারেন। আপনি যদি ভুলভাবে একটি ফিল্টার প্রয়োগ করেন, filter জন্য সংজ্ঞায়িত বাকি ফিল্টারগুলি কাজ করবে না।

blur

এটি একটি গাউসিয়ান অস্পষ্টতা প্রযোজ্য এবং আপনি পাস করতে পারেন এমন একমাত্র যুক্তি হল একটি radius , যা কতটা অস্পষ্টতা প্রয়োগ করা হয় । এটি একটি দৈর্ঘ্যের একক হওয়া দরকার, যেমন 10px । শতাংশ গ্রহণ করা হয় না.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

একটি উপাদানের উজ্জ্বলতা বাড়াতে বা কমাতে, উজ্জ্বলতা ফাংশন ব্যবহার করুন। উজ্জ্বলতার মানকে শতাংশ হিসাবে প্রকাশ করা হয় এবং অপরিবর্তিত চিত্রটিকে 100% এর মান হিসাবে প্রকাশ করা হয়। 0% মান চিত্রটিকে সম্পূর্ণ কালো করে, তাই 0% এবং 100% এর মধ্যে মান চিত্রটিকে কম উজ্জ্বল করে। উজ্জ্বলতা বাড়াতে 100% এর বেশি মান ব্যবহার করুন।

.my-element {
    filter: brightness(80%);
}

contrast

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

কন্ট্রাস্ট কমাতে বা বাড়াতে যথাক্রমে 0% এবং 100% এর মধ্যে একটি মান সেট করুন।

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

আপনি grayscale() এর মান হিসাবে 1 ব্যবহার করে একটি সম্পূর্ণ গ্রেস্কেল প্রভাব প্রয়োগ করতে পারেন, বা সম্পূর্ণরূপে সম্পৃক্ত উপাদান পেতে 0 । আপনি শুধুমাত্র একটি আংশিক গ্রেস্কেল প্রভাব প্রয়োগ করতে শতাংশ বা দশমিক মান ব্যবহার করতে পারেন। আপনি যদি কোন আর্গুমেন্ট পাস না করেন, তাহলে উপাদানটি সম্পূর্ণরূপে গ্রেস্কেল হবে। আপনি যদি 100% এর বেশি একটি মান পাস করেন তবে এটি 100% এ ক্যাপ করা হবে।

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

grayscale মতো, আপনি এটি চালু বা বন্ধ করতে invert() ফাংশনে 1 বা 0 পাস করতে পারেন। এটি চালু হলে, উপাদানের রং সম্পূর্ণরূপে উল্টানো হয়। আপনি শতাংশ বা দশমিক মান ব্যবহার করতে পারেন শুধুমাত্র রঙের একটি আংশিক উল্টানো প্রয়োগ করতে। আপনি invert() ফাংশনে কোনো আর্গুমেন্ট পাস না করলে, উপাদানটি সম্পূর্ণরূপে উল্টে যাবে।

.my-element {
    filter: invert(1);
}

opacity

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

opacity() ফিল্টারটি opacity প্রপার্টির মত কাজ করে, যেখানে আপনি অপাসিটি বাড়াতে বা কমাতে একটি সংখ্যা বা শতাংশ পাস করতে পারেন। আপনি যদি কোন আর্গুমেন্ট পাস না করেন, উপাদানটি সম্পূর্ণরূপে দৃশ্যমান হয়।

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

স্যাচুরেট ফিল্টারটি brightness ফিল্টারের অনুরূপ এবং একই যুক্তি গ্রহণ করে: সংখ্যা বা শতাংশ। উজ্জ্বলতা প্রভাব বাড়ানো বা কমানোর পরিবর্তে, saturate রঙের স্যাচুরেশন বাড়ায় বা হ্রাস করে।

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

আপনি এই ফিল্টারের সাথে একটি সেপিয়া টোন প্রভাব যুক্ত করতে পারেন যা grayscale() মতো কাজ করে। সেপিয়া টোন হল একটি ফটোগ্রাফিক প্রিন্টিং কৌশল যা কালো টোনকে বাদামী টোনে রূপান্তর করে গরম করার জন্য। আপনি sepia() এর যুক্তি হিসাবে একটি সংখ্যা বা শতাংশ পাস করতে পারেন যা প্রভাবকে বাড়ায় বা হ্রাস করে। কোনো আর্গুমেন্ট পাস না করলে একটি সম্পূর্ণ সেপিয়া প্রভাব যুক্ত হয় ( sepia(100%) )।

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

আপনি শিখেছেন কিভাবে hsl এর বর্ণটি রঙের পাঠে রঙের চাকার ঘূর্ণনকে উল্লেখ করে এবং এই ফিল্টারটি একইভাবে কাজ করে। আপনি যদি একটি কোণ পাস করেন, যেমন ডিগ্রী বা বাঁক, এটি সমস্ত উপাদানের রঙের বর্ণ পরিবর্তন করে, এটির উল্লেখ করা রঙের চাকার অংশটি পরিবর্তন করে। আপনি যদি কোন যুক্তি পাস না, এটি কিছুই করে না.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

  • ক্রোম: 18।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 35।
  • সাফারি: 6।

Source

আপনি একটি বক্র-আলিঙ্গন ড্রপ শ্যাডো প্রয়োগ করতে পারেন যেমন আপনি একটি ডিজাইন টুলে করেন, যেমন drop-shadow সহ ফটোশপ। এই ছায়াটি একটি আলফা মাস্কে প্রয়োগ করা হয় যা এটি একটি কাটআউট ছবিতে একটি ছায়া যোগ করার জন্য খুব দরকারী করে তোলে। drop-shadow ফিল্টারটি একটি শ্যাডো প্যারামিটার নেয় যার মধ্যে অফসেট-এক্স, অফসেট-ওয়াই, ব্লার এবং রঙের মান আলাদা করা আছে। এটি প্রায় box-shadow মতো, কিন্তু inset কীওয়ার্ড এবং স্প্রেড মান সমর্থিত নয়। 

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

ছায়া মডিউলে বিভিন্ন ধরনের ছায়া সম্পর্কে আরও জানুন।

url

Browser Support

  • ক্রোম: 5।
  • প্রান্ত: 12।
  • ফায়ারফক্স: 3.
  • সাফারি: 6।

Source

url ফিল্টার আপনাকে একটি লিঙ্ক করা SVG উপাদান বা ফাইল থেকে একটি SVG ফিল্টার প্রয়োগ করতে দেয়। আপনি এখানে SVG ফিল্টার সম্পর্কে আরও পড়তে পারেন

ব্যাকড্রপ ফিল্টার

Browser Support

  • ক্রোম: 76।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 103।
  • সাফারি: 18।

Source

ব্যাকড্রপ-ফিল্টার বৈশিষ্ট্য filter হিসাবে একই ফিল্টার ফাংশন মানগুলিকে গ্রহণ করে। backdrop-filter এবং filter মধ্যে পার্থক্য হল যে backdrop-filter প্রপার্টি শুধুমাত্র ফিল্টারগুলিকে ব্যাকগ্রাউন্ডে প্রযোজ্য করে, যেখানে filter প্রোপার্টি এটি সম্পূর্ণ উপাদানে প্রয়োগ করে।

এই পাঠের শুরুতে উদাহরণটি নিখুঁত উদাহরণ, কারণ আপনি পাঠ্যটি অস্পষ্ট করতে চান না এবং আদর্শভাবে আপনি অতিরিক্ত HTML উপাদান যোগ করতে চান না। শুধুমাত্র পটভূমিতে ফিল্টার প্রয়োগ করতে সক্ষম হওয়া এটি সক্ষম করে।

আপনার উপলব্ধি পরীক্ষা করুন

ফিল্টার আপনার জ্ঞান পরীক্ষা

নিচের কোনটি CSS ফিল্টার ফাংশন?

grayscale()
🎉
invert()
🎉
flip()
আবার চেষ্টা করুন!
multiply()
আবার চেষ্টা করুন!
blur()
🎉
brightness()
🎉

CSS কি SVG ফিল্টার ব্যবহার করতে পারে?

হ্যাঁ
url() ফিল্টার ফাংশন এটি সক্ষম করে
না
আবার চেষ্টা করুন!