آموزش افکت های CSS

فیلترها در اصل بخشی از ویژگی های SVG بود. با این حال وقتی سود مندی این ویژگی آشکار شد سازمان W3C شروع به کار کردن و اضافه کردن این ویژگی (افکت ها) به CSS شد. فیترهای CSS بسیار قدرتمند و به طور باور نکردنی استفاده آن آسان است. شما می توانید از این افکت ها استفاده کنید: محو کردن (Blur), روشن کردن (brighten), اشباع کردن (saturate) تصاویر استفاده کنید. این افکت ها می توانند به تنهایی یا به صورت ترکیبی با دیگر افکت ها استفاده شود.

شما می توانید به صروت زیر از این افکت ها استفاده کنید:

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

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

Brightness یا روشن کردن

این فیلتر روشنایی تصاویر شما را کنترل می کند. مقادیر قابل قبول این پارامتر مقدار بیشتر از صفر یا زیر صفر (منفی) می باشد. اگر شما مقدار این پارامتر را برابر با 0% قرار دهید تصویر شما را به یک تصویر سیاه سفید تبدیل می کند. یا اگر مقدار 100% باشد تصویر اصلی به شما تحویل می دهد یعنی هیچ تغییری اعمال نمی شود. خوب فکر می کنم متوجه شدید هر چه مقدار این پارامتر از 100% بیشتر باشد تصویر روشن تر می شود برای مثال اگر مقدار این پارامتر برابر با 300% باشد یعنی تصویر اصلی سه برابر روشن تر شده است.

img {
  filter: brightness(300%);
}

Contrast یا تضاد

با این فیلتر می توانید تضاد تصویر را کنترل کنید. درست مثل فیلتر روشنایی مقدار پارامتر بیشتر و کم تر از صفر می گیرد. این فیلتر تفاوت بین قسمت های تاریک و روشن تصویر را کنترل می کند. از این رو اگر مقدار 0% را قرار دهید تصویر سیاه سفید به شما تحویل می دهد.

img {
  filter: contrast(0%);
}

ترکیب انیمیشن و فیلترها

شما میتوانید فیلتر های متعدد را با یکدیگر ترکیب کنید

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

img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  ....
  96% {
    filter: brightness(400%);
  }
}