معرفی پنج افکت فیلتر پر کاربرد سی اس اس

افکت فیلتر های رنگی در ابتدا برای svg معرفی و توسعه داده شدن و هر روز هم شاهد بیشتر شدن تنوع و تعداد این فیلتر ها هستیم ، به هر حال با اینکه در svg شما دست باز تری دارید اما استفاده از اون کمی پیچیده هست و هر جایی هم توصیه نمیشه . به همین دلیل W3C به زودی چندین افکت پر کاربرد رو به CSS اضافه کرد .

افکت فیلتر های سی اس اس بسیار پرکاربرد هستند و استفاده از اونها خیلی ساده و آسونه . شما می تونید با استفاده از اونها مقدار روشنایی ، اشباع رنگ و کنتراست تصاویرتون رو تغییر بدید و حتی تصاویری بلور شده بسازید ، حتی اگه کمی خلاق باشید می تونید از ترکیب همین چند افکت ساده فیلتر افکت های متنوع و ترکیبی جدیدی رو ایجاد کنید .

syntax کلی برای استفاده این افکت ها به شکل زیر هست که در ادامه و به صورت مرحله به مرحلههر بخش رو تشریح می کنیم  .

filter: <filter-function> [<filter-function>]* | none

Brightness :

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

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {

filter: brightness(300%);

}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Brightness by SitePoint (@SitePoint) on CodePen.

Contrast :

این فیلتر هم که مشخصا اختلاف و تضاد رنگی بین روشن ترین نقاط تصویر و تاریک ترین نقاط تصویر رو واضح می کنه ، درست مثل فیلتر روشنایی این فیلتر هم مقادیر بزرگتر از ۰ رو اختیار می کنه و مقدار ۰ یک تصویر خاکستری رنگ و مقدار ۱۰۰% تصویر اولیه رو به به عنوان خروجی به کاربر نمایش می ده .

استفاده درست از این تصویر می تونه تصاویر با کیفیت متوسط رو به تصاویر جذاب و با کیفیتی تبدیل کنه و البته استفاده نادرستش می تونه شرایط عکس رو به وجود بیاره ، به هر حال اونچه که مسلمه دیگه برای استفاده تصاویر توی وب سایتتون نیاز به نرم افزار های ویرایشگر تصویر ندارید .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: contrast(0%);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

Grayscale :

این فیتلر هم همون طور که از نامش پیداست برای ایجاد تصاویر سیاه و سفید یا به عبارتی خاکستری و سفید استفاده میشه .

با مقدار دهی این صفت تمامی رنگ های مورد استفاده توی تصاویر شما به رنگ خاکستری با اشباع خاصی بدل میشن که در نهایت منجر به ایجاد تصاویر سیاه و سفید میشه .

مقدار ۰ هیچ تاثیری بر خروجی نداره و مقدار ۱۰۰% یک تصویر کاملا سیاه و سفید به شما ارئه می ده ، مقادیر بین ۰ و ۱۰۰ رو هم می تونید اعمال کنید .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: grayscale(100%);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Grayscale by SitePoint (@SitePoint) on CodePen.

Saturate :

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

مقادیر مثبت یا به عبارتی بزرگتر از ۰ هم برای اون قابل استفاده هستن ، خود مقدار ۰ تصویری بی رنگ (به عبارت دیگه سفید) رو به شما تحویل می ده و مقدار ۱۰۰ تصویر ورودی رو به عنوان خروجی نمایش می ده ، می تونید از مقادیر بزگتر از ۱۰۰ تا هر مقدار دلخواهی استفاده کنید اما شاید در عمل برای هر تصویر خاص محدودیتی متفاوت وجود داشته باشه .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: saturate(0%);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

Blur :

این فیلتر کمی برای همه ما نام آشنا تره ، اقلا نام آشنا تری داره ، با استفاده از این فیلتر شما می تونید رنگ های موجود در تصویر رو با هم تداخل بدید و اونا رو از فاز بسته ای که درش قرار گرفتن آزاد تر کنید ، مقدار دهی به این فیتلر کمی متفاوت تر و بر حسب پیکسل هست ، توجه کنید که عددی که به هر تصویر باید داده بشه تا مقدار خاصی بلور روش اعمال شه متفاوت هست ، مثلا ممکنه مقدار ۱px برای تصویری بلور مناسبی باشه ولی روی تصویر بزرگتر هیچ تغییر قابل مشاهده ای ایجاد نکنه .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: blur(1px);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Blur by SitePoint (@SitePoint) on CodePen.

جمع بندی :

۵ افکت و فیلتری که معرفی کردیم مشخصا از مشهور ترین و پرکاربرد ترین ها برای استفاده های متوسط و حتی حرفه ای هستن اما خب مشخصا کل افکت های مورد نظر رو به شما ارائه نمی دن ، البته همون طور که گفتیم ممکنه خلاقیت شما در استفاده از چند افکت به صورت همزمان افکت های خاص و یکتایی رو ایجاد کنه که البته برای ایجاد کردن چنین افکت هایی به یه مقدار تجربه نیاز خواهید داشت .

نکته مهم که باید اشاره کنیم بهش اینه که استفاده از این افکت ها محدود به تصاویر نمیشه و شما می تونید با استفاده از اونها هر المنت دیگه ای رو دستخوش تغییر کنید ، البته توجه کنید که این تغییرات فقط به خود المنت اثر گذار نیستن و بوردر ها و سایه های مربوط به اون المنت هم با اعمال افکت دچار تغییر میشن .

امیدواریم با استفاده از این مطالب بتونید خیلی راحت تغییرات مد نظرتون رو به تصویر هاتون اعمال کنید .

اگه مطلب رو دوست داشتید پس به اشتراکش بزارید .