সিএসএস(৩) 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 প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।

«পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস রেফারেন্স

CSS Properties

সিএসএস(৩) filterপ্রোপার্টি

ব্রাউজার সাপোর্ট

সংজ্ঞা ও ব্যবহার

সিএসএস সিনট্যাক্স

উদাহরণ

ফলাফল

জাভাস্ক্রিপ্ট সিনট্যাক্স

উদাহরণ

ফলাফল

Blur এর উদাহরণ

উদাহরণ

ফলাফল

Brightness এর উদাহরণ

উদাহরণ

ফলাফল

Contrast এর উদাহরণ (Contrast Example)

উদাহরণ

ফলাফল

Drop Shadow এর উদাহরণ

উদাহরণ

ফলাফল

Grayscale এর উদাহরণ

উদাহরণ

ফলাফল

Hue Rotation উদাহরণ

উদাহরণ

ফলাফল

Invert উদাহরণ

উদাহরণ

ফলাফল

Opacity উদাহরণ

উদাহরণ

ফলাফল

Saturate এর উদাহরণ (Saturate Example)

উদাহরণ

ফলাফল

Sepia এর উদাহরণ

উদাহরণ

ফলাফল

Combining ফিল্টার/Multiple ফিল্টার

উদাহরণ

ফলাফল

ফিল্টারসমূহ

উদাহরণ

ফলাফল

filter প্রোপার্টির ভ্যালু-সমূহ

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য