HTML DOM Style filter প্রপার্টি এলিমেন্টে দৃশ্যমান ইফেক্ট প্রয়োগ করতে ব্যবহৃত হয়।
সিনট্যাক্স
filter প্রপার্টি সেট করার জন্য:
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
ফিল্টার মান এবং বিবরণ
| ফিল্টার | বিবরণ |
|---|---|
| none | কোনো ইফেক্ট প্রয়োগ করে না। |
| blur(px) | ব্লার ইফেক্ট প্রয়োগ করে। |
| brightness(%) | ছবির আলোকমাত্রা সমন্বয় করে। 100% (মূল ছবি) থেকে বেশি মান নেয়। |
| contrast(%) | ছবির কনট্রাস্ট সমন্বয় করে। 0% (সম্পূর্ণ কালো) থেকে 100% (মূল ছবি) এবং 100%-এর বেশি হলে কম কনট্রাস্ট। |
| drop-shadow(h-shadow v-shadow blur spread color) | ছবিতে ড্রপ শ্যাডো প্রয়োগ করে। |
| grayscale(%) | ছবিকে গ্রेস্কেলে রূপান্তর করে। 0% মূল ছবি, 100% সম্পূর্ণ গ্রে। |
| hue-rotate(deg) | ছবিতে হিউ রোটেশন প্রয়োগ করে। ডিফল্ট 0 ডিগ্রি (মূল ছবি), 360 ডিগ্রি পর্যন্ত যেতে পারে। |
| invert(%) | ছবির রঙ উল্টিয়ে দেয়। |
| opacity(%) | ছবির অপাসিটি সেট করে। 0% (সম্পূর্ণ স্বচ্ছ) থেকে 100% (মূল ছবি এবং ডিফল্ট)। |
| saturate(%) | ছবির স্যাচুরেশন বা রঙের তীব্রতা বাড়ায়। |
| sepia(%) | ছবিকে সেপিয়া টোনে রূপান্তর করে। |
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: hue-rotate(90deg);
}
</style>
<script>
function changeFilter() {
document.getElementById("one").style.filter = "sepia(40%)";
document.getElementById("Sample").innerHTML = "উপরের ছবিতে এখন সেপিয়া ফিল্টার প্রয়োগ করা হয়েছে";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>নিচের বাটনে ক্লিক করে উপরের ছবির ফিল্টার প্রপার্টি পরিবর্তন করুন</p>
<button onclick="changeFilter()">ফিল্টার পরিবর্তন করুন</button>
<p id="Sample"></p>
</body>
</html>
আউটপুট
প্রাথমিকভাবে ছবিতে 90 ডিগ্রি হিউ-রোটেশন ফিল্টার থাকবে।
"ফিল্টার পরিবর্তন করুন" বাটনে ক্লিক করার পর ছবিতে 40% সেপিয়া ফিল্টার প্রয়োগ হবে।
