فیلترهای تصویر (Image Filters)
«فیلترهای تصویر» یعنی افکت های دیداری روی عنصر. با ویژگی filter انجام می شود. مثلاً تاری، روشنایی، کنتراست و… . مثل فیلترهای اینستاگرام، اما با CSS.
فیلترها در CSS چگونه کار می کنند؟
ویژگی filter مجموعه توابع می پذیرد. هر تابع یک افکت می دهد. مقدار هر تابع شدت افکت است. مقدار بیشتر، اثر بیشتر است.
تاری تصویر با blur()
تابع blur() تصویر را تار می کند. واحد معمولاً پیکسل است.
#img1 {\n filter: blur(2px);\n}\n\n#img2 {\n filter: blur(6px);\n}\nروشنایی با brightness()
تابع brightness() میزان نور را تنظیم می کند. 100% مقدار اصلی است.
#img1 {\n filter: brightness(150%);\n}\n\n#img2 {\n filter: brightness(50%);\n}\nکنتراست با contrast()
تابع contrast() اختلاف روشنی و تیرگی را تغییر می دهد.
#img1 {\n filter: contrast(150%);\n}\n\n#img2 {\n filter: contrast(50%);\n}\nسایه افتاده با drop-shadow()
تابع drop-shadow() سایه بیرونی شبیه box-shadow می دهد.
#img1 {\n filter: drop-shadow(8px 8px 10px gray);\n}\n\n#img2 {\n filter: drop-shadow(10px 10px 7px lightblue);\n}\nسیاه وسفید با grayscale()
تابع grayscale() رنگ ها را به خاکستری تبدیل می کند. 1 یعنی کامل.
#img1 {\n filter: grayscale(1);\n}\n\n#img2 {\n filter: grayscale(60%);\n}\n\n#img3 {\n filter: grayscale(0.4);\n}\nچرخش فام با hue-rotate()
تابع hue-rotate() رنگ ها را روی چرخه رنگ می چرخاند. واحد درجه است.
#img1 {\n filter: hue-rotate(200deg);\n}\n\n#img2 {\n filter: hue-rotate(90deg);\n}\n\n#img3 {\n filter: hue-rotate(-90deg);\n}\nمعکوس رنگ با invert()
تابع invert() رنگ ها را برعکس می کند. 100% یعنی کاملاً معکوس.
#img1 {\n filter: invert(0.3);\n}\n\n#img2 {\n filter: invert(70%);\n}\n\n#img3 {\n filter: invert(100%);\n}\nشفافیت با opacity()
تابع opacity() میزان شفافیت را تنظیم می کند. 0 شفافِ کامل است.
#img1 {\n filter: opacity(80%);\n}\n\n#img2 {\n filter: opacity(50%);\n}\n\n#img3 {\n filter: opacity(0.2);\n}\nاشباع رنگ با saturate()
تابع saturate() شدت رنگ را تغییر می دهد. 200% یعنی رنگ تندتر.
#img1 {\n filter: saturate(0);\n}\n\n#img2 {\n filter: saturate(100%);\n}\n\n#img3 {\n filter: saturate(200%);\n}\nته رنگ قهوه ای با sepia()
تابع sepia() عکس را گرم و قدیمی می کند. 1 یعنی کامل.
#img1 {\n filter: sepia(1);\n}\n\n#img2 {\n filter: sepia(60%);\n}\n\n#img3 {\n filter: sepia(0.4);\n}\nترکیب چند فیلتر باهم
می توان چند تابع پشت سرهم نوشت. ترتیب اثر دارد. اولویت مهم است.
img {\n filter: grayscale(1) brightness(120%) contrast(110%);\n}\nنکته: برای متن و آیکن هم می توان فیلتر گذاشت. اما خوانایی را همیشه چک کن.
مراحل عملی سریع
- تصویر را انتخاب کن.
- یک تابع فیلتر بگذار.
- شدت را کم و زیاد کن.
- در موبایل تست کن.
- در صورت نیاز، چند فیلتر ترکیب کن.
جمع بندی سریع
- filter افکت دیداری می دهد.
- مقدار بیشتر، اثر بیشتر است.
- چند فیلتر را می توان ترکیب کرد.
- خوانایی و دسترس پذیری مهم اند.
- در دستگاه های مختلف بررسی کن.
برای تجربه بهتر، فیلترهای تصویر را کنار تراز مرکز تصویر و استایل دهی تصاویر استفاده کن.