সিএসএস(৩) filterপ্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Internet Explorer | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| filter | ১৮.০ -webkit- | সাপোর্ট করে না | ৩৫.০ | ৯.১ ৬.০ -webkit- |
১৫.০ -webkit- |
সংজ্ঞা ও ব্যবহার
filter প্রোপার্টি একটি এলিমেন্টের ভিজ্যুয়াল ইফেক্ট নির্ধারন করেঃ (বেশিরভাগ সময় <img> এর)
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
filter:
none / blur() / brightness() / contrast() / drop-shadow() / grayscale() / hue-rotate()
/ invert() / opacity() / saturate() / sepia() / url();
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title><style>
img {
-webkit-filter: grayscale(100%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>ছবিটি grayscale এ রুপান্তর করিঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.WebkitFilter="grayscale(100%)"উদাহরণ
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> ছবিটি সাদা এবং কালো (১০০% gray ) কালারে পরিবর্তন করার জন্য নিচের বাটনটি চাপুন ।</p>
<button onclick="myFunction()">চেষ্টা করুন</button><br><br>
<img id="sattImg" src="satt_bangla1.jpg" alt="bangladesh" width="300" height="300">
<p> <strong>নোটঃ</strong> এই উদাহরণটি ইন্টারনেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
<script>
function myFunction() {
// স্ট্যান্ডার্ড সিনট্যাক্স
document.getElementById("sattImg").style.filter = "grayscale(100%)";
//গুগল ক্রোম, অপেরা ও সাফারির জন্য
document.getElementById("sattImg").style.WebkitFilter = "grayscale(100%)";
}
</script>
</body>
</html>
ফলাফল
Blur এর উদাহরণ
ইমেজে ব্লার ইফেক্ট প্রয়োগঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: blur(5px); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: blur(5px);
}
</style>
</head>
<body>
<p>ছবিটিতে blur effect ব্যবহার করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টারনেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Brightness এর উদাহরণ
ইমেজের উজ্জ্বলতা সমন্বয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: brightness(200%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: brightness(200%);
}
</style>
</head>
<body>
<p>ছবিটিতে brightness যুক্ত করা হয়েছেঃ</p><img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টারনেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Contrast এর উদাহরণ (Contrast Example)
ইমেজ কন্ট্রেষ্ট সমন্বয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: contrast(200%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: contrast(200%);
}
</style>
</head>
<body>
<p>ছবিটিতে contrast যুক্ত করা হয়েছেঃ</p><img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Drop Shadow এর উদাহরণ
ইমেজে ড্রপ স্যাডো প্রভাব সমন্বয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>ছবিটিতে drop shadow effect দেওয়া হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
Grayscale এর উদাহরণ
ইমেজকে grayscale এ রুপান্তর
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: grayscale(50%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: grayscale(50%);
}
</style>
</head>
<body>
<p> ছবিটি grayscale এ রুপান্তর করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টারনেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Hue Rotation উদাহরণ
ইমেজের উপর Hue Rotation প্রয়োগ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: hue-rotate(90deg); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<p> ছবিটিতে hue rotation ব্যবহার করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Invert উদাহরণ
Invert ইমেজের নমুনাঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title><style>
img {
-webkit-filter: invert(100%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: invert(100%);
}
</style>
</head>
<body>
<p> ছবিটিতে Invert এর নমুনা দেখানো হলোঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টারনেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Opacity উদাহরণ
ইমেজের Opacity লেভেল সেটঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: opacity(30%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: opacity(30%);
}
</style>
</head>
<body>
<p>ছবিটির opacity level পরিবর্তন করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টারনেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Saturate এর উদাহরণ (Saturate Example)
ইমেজকে Saturate করে
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: saturate(800%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: saturate(800%);
}
</style>
</head>
<body>
<p>ছবিটি Saturate করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Sepia এর উদাহরণ
Sepia ইমেজ পরিবর্তন
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: sepia(100%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: sepia(100%);
}
</style>
</head>
<body>
<p>ছবিটি sepia করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
Combining ফিল্টার/Multiple ফিল্টার
Multiple ফিল্টারগুলোর প্রত্যেকটি ফিল্টারকে স্পেস দ্বারা পৃথক করা হয়।
বিঃদ্রঃঅর্ডারটি গুরুত্বপূর্ণ (sepia ফাংশন এর পর grayscale ফাংশন ব্যবহার হবে একটি সম্পূর্ন গ্রে ইমেজ ফলাফল দিবে।)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
-webkit-filter: contrast(200%) brightness(150%); /* গুগল ক্রোম, সাফারি ও অপেরার জন্য */
filter: contrast(200%) brightness(150%);
}
</style>
</head>
<body>
<p>ছবিটিতে contrast এবং brightness যুক্ত করা হয়েছেঃ</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="bangladesh" width="280" height="120">
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সমর্থন করে না।</p>
</body>
</html>
ফলাফল
ফিল্টারসমূহ
সকল ফিল্টারের ফাংশন প্রর্দশনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
img {
width: 33%;
height: auto;
float: left;
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<p><b>বিশেষ দ্রষ্টব্যঃ</b> filter প্রোপার্টি ইন্টার্নেট এক্সপ্লোরার , ইডিজিই ১২, সাফারি ৫.১ এবং আগের ভার্সনে সাপোর্ট করে না।</p>
<img src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="blur" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="brightness" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="contrast" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="grayscale" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="huerotate" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="invert" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="opacity" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="saturate" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="sepia" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
<img class="shadow" src="../cssref_examples/satt_bangla1.jpg" alt="satt_bangla1" width="280" height="120">
</body>
</html>
ফলাফল
filter প্রোপার্টির ভ্যালু-সমূহ
- none - ডিফল্ট ভ্যালু। কোন ইফেক্ট নাই।
- blur(px) - ইমেজকে ব্লার করে। একটি বড় ভ্যালু অধিক ব্লার তৈরি করবে। যদি কোন মান নির্দিষ্ট না থাকে তখন ০ ব্যবহার হবে।
- brightness(%) - ইমেজের উজ্জ্বলতা বাড়ায়। ০% ইমেজকে সম্পূর্ন কালো করবে। ১০০%(১)ইমেজের ডিফল্ট এবং অরিজিনাল ইমেজ প্রদর্শন করবে।১০০% উপরের মান অনেক উজ্জ্বল ফলাফল দেখাবে।
- contrast(%) - একটি ইমেজের contrast নির্ধারন করে। ০% ইমেজকে সম্পূর্ন কালো করবে। ১০০%(১)ইমেজের ডিফল্ট এবং অরিজিনাল ইমেজ প্রদর্শন করবে। ১০০% উপরের মান অনেক উজ্জ্বল ফলাফল দেখাবে।
- drop-shadow(h-shadow v-shadow blur spread color) - একটি ইমেজে ড্রপ স্যাডো ইফেক্ট দেখায়। সম্ভাব্য ভ্যালু:h-shadow -
এটি আবশ্যক। অনুভুমিক শ্যাডোর জন্য একটি পিক্সেল ভ্যালু নির্ধারন করে। নেগেটিভ ভ্যালু ইমেজের বাম দিকে স্যাডো দেখাবে।v-shadow -
এটি আবশ্যক। উলম্ব শ্যাডোর জন্য একটি পিক্সেল ভ্যালু নির্ধারন করে।
নেগেটিভ ভ্যালু ইমেজের উপরে দিকে স্যাডো দেখাবে।blur -
এটি ঐচ্ছিক। এটি একটি তৃতীয় ভ্যালু এবং অবশ্যই এটি পিক্সেলে হতে হবে। শ্যাডোতে ব্লার ইফেক্ট যোগ করে। একটি বড় ভ্যালু অধিক ব্লার তৈরি করবে (শ্যাডোটি অধিকতর বড় এবং অনেক উজ্জ্বল হবে)। নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়। যদি কোনো ভ্যালু নির্দিষ্ট না হয় তখন ০ ব্যবহার হবে।spread - এটি ঐচ্ছিক। এটি হচ্ছে চতুর্থ ভ্যালু এবং অবশ্যই এটি পিক্সেলে হতে হবে।
পজিটিভ ভ্যালু শ্যাডোকে প্রসারিত করে এবং বড় আকার ধারন করে এবং নেগেটিভ ভ্যালু শ্যাডোকে সংকুচিত করবে। যদি ভ্যালু নির্দিষ্ট করা না হয় তাহলে ভ্যালু ০ হবে। color - এটি ঐচ্ছিক। শ্যাডোতে কালার যোগ করে। যদি নির্দিষ্ট না করা হয় তখন কালার ব্রাউজারের উপর নির্ভর করবে।
একটি উদাহরণ একটি লাল স্যাডো তৈরি করবে যা অনুভুমিক এবং উলম্বভাবে ৮ পিক্সেল হবে এবং যার ব্লার ইফেক্ট ১০ পিক্সেল হবে filter: drop-shadow(8px 8px 10px red);পরামর্শঃ এই ফিল্টারটি box-shadow প্রোপার্টির মত। - grayscale(%) - গ্রেস্কেলে রুপান্তর। ০% হচ্ছে ডিফল্ট এবং এটি ইমেজের অরিজিনাল ছবি প্রদর্শন করে। ১০০% সম্পূর্ণ gray তে রুপান্তর করে। বিঃদ্রঃ নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়।
- hue-rotate(deg) -ইমেজে hue রোটেশন যোগ করা। ইমেজের বৃ্ত্তের চারপাশে ডিগ্রিতে কালার নির্ধারন করে। ০ ডিগ্রি হচ্ছে ডিফল্ট এবং এটি অরিজিনাল ইমেজ প্রদর্শন করে।বিঃদ্রঃ ৩৬০ ডিগ্রি হচ্ছে সর্বোচ্চ ভ্যালু।
- invert(%) - ইমেজের নমুনাকে ইনভার্ট করা। ০% হচ্ছে ডিফল্ট এবং অরিজিনাল ইমেজ প্রদর্শন করে। ১০০% ছবিকে সম্পূর্ণভাবে ইনভার্ট করে। বিঃদ্রঃ নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়।
- opacity(%) - ছবিতে অস্পষ্টতা যোগ করে। opacity-level transparency-level কে বর্ণনা করে, যেখানেঃ
০% হচ্ছে সম্পূর্ণ transparent.১০০% হচ্ছে ডিফল্ট এবং এটি ছবির অরিজিনাল ছবি প্রদর্শন করে। বিঃদ্রঃ নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়।
নোট: এই ফিল্টারটি opacity প্রোপার্টির মতই। - saturate(%) - ইমেজকে পরিপূর্ণ(saturate) করে। ০% ছবিকে সম্পূর্ণভাবে un-saturated করে। ১০০% হচ্ছে ডিফল্ট এবং এটি ছবির অরিজিনাল ছবি প্রদর্শন করে।
১০০% এর উপরের মান super-saturated ফলাফল দিবে। বিঃদ্রঃ নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়। - sepia(%) - ইমেজকে sepia তে রুপান্তর করে। ০% হচ্ছে ডিফল্ট এবং এটি ছবির অরিজিনাল ছবি প্রদর্শন করে। ১০০% ইমেজকে সম্পূর্ণভাবে sepia করে। বিঃদ্রঃ নেগেটিভ ভ্যালু গ্রহনযোগ্য নয়।
- url() - url() ফাংশন SVG ফিল্টারে একটি এক্সএমএল ফাইলের লোকেশন নির্ধারণ করে এবং একটি এংকর যুক্ত করলে ফিল্টার এলিমেন্টকে নির্দিষ্ট করে। উদাহরণ: filter: url(svg-url#element-id)
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
filter প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।