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

Blur()

این تابع برای محو و مات کردن به کار گرفته می‌شود، به این صورت که هرچه عدد ورودی تابع بزرگتر باشد، محوتر می‌شود. (مقدار صفر هیچ تاثیری نخواهد داشت) ورودی این تابع می‌تواند با واحدهای px و em و rem و … باشد ولی باید توجه کنید که مقدار درصدی را قبول نمی‌کند.

* نکته حائز اهمیت این است که فیلتر نه تنها روی خود عنصر بلکه بر روی تمام فرزندان و همچنین border، outline، box-shadow نیز اعمال می‌شود.

div {
  filter: blur(10px);
  filter: blur(.7em);
  filter: blur(0);
  -webkit-filter: blur(5px);
}

brightness()

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

div {
  filter: brightness(150%);
  filter: brightness(0);
  filter: brightness(0.7);
  -webkit-filter: brightness(0.7);
}

contrast()

در این تابع به کنترل تفاوت بین روشن‌ترین نقطه‌ی تصویر با تیره‌ترین نقطه می‌پردازیم و نحوه مقداردهی ورودی آن مثل تابع brightness() است.

div {
  filter: contrast(150%);
  filter: contrast(0);
  filter: contrast(0.7);
  -webkit-filter: contrast(0.7);
}

greyscale()

هدف این از بین بردن رنگ تصویر که مقادیر بین ۰ تا ۱۰۰٪ یا ۰ تا ۱ را برای ورودی می‌پذیرد. عدد ۰ تغییری در تصویر ایجاد نمی‌کند، عدد ۱۰۰٪ تصویر کاملا خاکستری و بدون رنگ و اعداد بزرگتر از ۱۰۰٪ مانند همان ۱۰۰٪ عمل می‌کنند.

div {
  filter: grayscale();
  filter: grayscale(1);
  filter: grayscale(40%);
  -webkit-filter: grayscale(0.28);
}

hue-rotate()

با توجه به ساختار رنگ‌ها در دایره ۳۶۰ درجه، این تابع با زاویه‌ای که مات در ورودی تابع می‌دهیم، تمام رنگ‌های موجود در تصویر را به همان مقدار در دایره رنگی تغییر می‌دهد.

همان طور که گفتیم ورودی تابع با واحد درجه است با مقدیری بین ۰ تا ۳۶۰.

Invert()

همان طور که از اسم این تابع مشخص است، به معکوس کردن رنگ‌ها می‌پردازد. ورودی آن مقادیری بین ۰ تا ۱۰۰٪ را می‌گیرد که مقدار ۱۰۰٪ باعث نهایت معکوس شده‌ی رنگ‌های تصویر است.

این تابع مانند برخی از مابقی تابع‌ها مقدار بین ۰ تا ۱ را نیز برای ورودی می‌پذیرد.

div {
  filter: invert();
  filter: invert(40%);
  filter: invert(0.32);
  -webkit-filter: invert(1);
}

opacity()

این تابع دقیق مانند opacity در css عمل می‌کند.

Saturate()

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

Sepia()

این تابع به تصویر مورد نظر ته رنگ قهوه‌ای اضافه می‌کند تا شبیه عکس‌های قدیمی شود. مقادیر ورودی آن همانند تابع saturate() است.

Drop-shadow()

حتما با ویژگی box-shadow در css آشنایی دارید. این نوع تابع در فیلترها هم همانند همان ویژگی عمل می‌کند البته با کمی تفاوت.

حتما تا به حال به این مسئله برخوردید که بخواهید به یک تصویر مثلا از ستاره که ترنسپرنت است سایه بدهید، از ویژگی box-shadow استفاده کردید و به نتیجه‌ی زیر رسیدید.

ولی قطعا این نتیجه‌ای که شما به دنبال آن بودید نیست و نمی‌خواهید که سایه به دور کادر مربعستطیلی تصویر بیافتد. شما به دنبال سایه دادن به خود ستاره هستید، برای این منظور از این تابع در فیلترها استفاده کنید.

در ورودی این تابع دقیقا مثل box-shadow دو مقدار اول مکان سایه و مقدار سوم میزان محو بودن سایه و مقدار چهارم هم رنگ سایه را مشخص می‌کند.

div {
  filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));
}

url()

این به ما این اجازه را می‌دهد که یک فیلتر خاص خودمان را (با کمک SVG) روی تصویر اعمال کنیم که به صورت انجام می‌پذیرد.

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"/>
  filter>
svg>

div {
  filter: url(#myFilter); 
-webkit-filter: url(myFilters.xml#effect);
}

ترکیب فیلترها

برای استفاده از چند تابع به روش زیر می‌توانید عمل کنید.

div {
  filter: sepia(1) brightness(150%) contrast(0.5);
}

سایت css-trick برای کمک به طراحان ابزاری را ارائه کرده‌ است که تمامی تابع‌های بالا را می‌توان تولید و تست کرد.