آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۲۲) : ویژگی filter – قسمت ۱

در این قسمت و قسمتهای بعدی قصد داریم ویژگی filter موجود در CSS رو بصورت کامل بهتون آموزش بدیم و شما رو با اون و قابلیتهایش آشنا کنیم. برای این ویژگی از این لینک به عنوان منبع استفاده میکنیم.

فیلترها در اصل و در ابتدا درون SVG معرفی و به کار گرفته شدن. بعد از SVG، توسعه دهندگان تصمیم گرفتن که filter‌ها رو هم درون CSS وارد کنن تا کاربران بتونن به سادگی با استفاده از اونا، افکتهای مورد نظر خودشون رو اعمال کنن. Filter‌ها درون CSS خیلی قدرتمند و بدرد بخور هستن و به سادگی میتونین از اونا استفاده کنید. شما میتونین با استفاده از اونا افکتهایی مثل blur و brightness و saturate و … رو اعمال کنید. شما همچنین میتونین بصورت ترکیبی و همزمان از چند فیلتر استفاده کنید و افکتهای پیشرفته‌تری رو به وجود بیارید. پشتیبانی مرورگرها از filter بصورت زیر هست:

خب حالا یکی یکی انواع مختلف filter‌ها رو با هم بررسی میکنیم و در مورد اونا براتون توضیح میدیم و مثالهایی رو میزنیم. برای اینکار در ابتدا یک تصویر رو قرار میدیم:

تصویر اولیه و اصلی بصورت زیر هست:

Brightness یا روشنایی

این فیلتر میزان روشنایی تصاویر رو کنترل میکنه. این مورد میتونه مقادیر ۰ و بزرگتر از ۰ رو قبول کنه و متناسب با اون روشنایی رو مشخص کنه. مثلا اگر مقدار اون رو ۰% قرار بدین باعث میشه که روشنایی تصویر شما ۰ بشه و یعنی تصویر سیاه خواهد شد و هیچی معلوم نیست. اگر مقدار اون رو ۱۰۰% قرار بدیم، تصویر مورد نظر هیچ تفاوتی نخواهد کرد. اگر مقدار کمتر از ۱۰۰ باشه باعث میشه که تصویر تیره‌تر بشه و اگر بیشتر از ۱۰۰ باشه، تصویر روشن‌تر میشه. هر چه که مقدار رو بیشتر کنیم، روشنایی تصویر هم بیشتر خواهد شد. مثلا اگر مقدار رو ۳۰۰% قرار بدیم، روشنایی تصویر ۳ برابر خواهد شد. کد زیر رو در نظر بگیرید:

img {
  filter: brightness(300%);
}

همونطور که میبینید تابع brightness رو قرار دادیم و مقدار ۳۰۰% رو به اون پاس دادیم. با اینکار خروجی تصویر بصورت زیر میشه:

همونطور که میبینید، تصویر مورد نظر سه برابر روشن‌تر شده است. اگر مقداری کمتر از ۱۰۰ قرار بدیم، باعث میشه که روشنایی تصویر کم بشه و تصویر تاریک بشه. مثلا کد زیر رو نگاه کنید:

img {
  filter: brightness(20%);
}

خروجی بصورت زیر میشه:

میبینید که تصویر مورد نظر تیره‌تر میشه و روشنایی اون ۵ برابر کم میشه.

Contrast یا کنتراست

با استفاده از این فیلتر میتونین میزان کنتراست تصویر رو مشخص کنید. درست شبیه به فیلتر brightness این مورد هم مقادیر بزرگتر و مساوی با ۰ رو قبول میکنه. این فیلتر تفاوت و اختلاف قسمت تیره و روشن تصویر رو کنترل میکنه. بنابراین اگر مقدار رو ۰% قرار بدیم، تصویر خاکستری خواهد شد. اگر مقدار رو ۱۰۰% قرار بدیم، تصویر نهایی همانند تصویر اولیه خواهد بود و تفاوتی نخواهد کرد. اگر مقدار رو بیشتر از ۱۰۰% قرار بدیم، کنتراست تصویر بالا میره. مثلا کد زیر رو در نظر بگیرید:

img {
  filter: contrast(200%);
}

خروجی بصورت زیر خواهد بود:

همونطور که میبینید تفاوت بین نقاط تیره و روشن مشخص‌تر شده است. اگر مقدار رو کمتر از ۱۰۰ قرار بدیم بصورت زیر میشه:

img {
  filter: saturate(20%);
}

خروجی:

به همین سادگی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

نویسنده

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.