آموزش فیلترهای تصویر در CSS

از ویژگی filter در CSS، برای اضافه کردن افکت های بصری به عناصر استفاده می شود.  

 (چند فیلتر تصویر در CSS)

 از ویژگی filter در CSS برای اضافه کردن افکت های بصری(مانند blur یا saturation) به عناصر استفاده می شود. در داخل ویژگی filter، می توانیم از تابع های CSS زیر استفاده کنیم: 

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

استفاده از تابع blur() در CSS

تابع فیلتر blur()، باعث می شود یک افکت محو شدگی به یک عنصر اعمال شود. هرچه مقدار این تابع بیشتر باشد، محو شدگی بیشتر خواهد بود:

#img1 {
  filter: blur(2px);
}

#img2 {
  filter: blur(6px);
}

استفاده از تابع brightness() در CSS

از تابع فیلتر brightness() برای تنظیم روشنایی(brightness) یک عنصر استفاده می شود. 

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

#img1 {
  filter: brightness(150%);
}

#img2 {
  filter: brightness(50%);
}

 استفاده از تابع contrast() در CSS

از تابع فیلتر contrast() برای تنظیم کنتراست یک عنصر استفاده می شود. 

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

#img1 {
  filter: contrast(150%);
}

#img2 {
  filter: contrast(50%);
}

استفاده از تابع drop-shadow() در CSS

تابع فیلتر drop-shadow() یک افکت سایه روشن را به یک تصویر اعمال می کند. 

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}

#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

استفاده از تابع brightness() در CSS

تابع فیلتر grayscale() یک تصویر را خاکستری می کند. 

• مقدار %100 (یا 1) باعث می شود تصویر کاملا خاکستری شود. 
• مقدار %0 (یا 0) هیچ تاثیری ایجاد نمی کند. 

#img1 {
  filter: grayscale(1);
}

#img2 {
  filter: grayscale(60%);
}

#img3 {
  filter: grayscale(0.4);
}

استفاده از تابع hue-rotate() در CSS

تابع فیلتر hue-rotate() یک چرخش رنگ(color rotation) را به یک عنصر اعمال می کند. این تابع یک hue rotation را به تصویر اعمال می کند. این مقدار، تعداد درجه‌های اطراف دایره رنگی که تصویر با آن مطابقت دارد را تعریف می‌کند. یک چرخش رنگ مثبت(positive hue rotation)، مقدار hue را افزایش می دهد اما یک چرخش رنگ منفی، مقدار hue را کاهش می دهد. 0deg تصویر اصلی را ارائه می دهد. 

img1 {
  filter: hue-rotate(200deg);
}

#img2 {
  filter: hue-rotate(90deg);
}

#img3 {
  filter: hue-rotate(-90deg);
}

استفاده از تابع invert() در CSS

تابع invert() رنگ یک تصویر را معکوس می کند. 

• %100 باعث می شود تصویر کاملا معکوس شود.
• %0 هیچ تاثیری ایجاد نمی کند. 

#img1 {
  filter: invert(0.3);
}

#img2 {
  filter: invert(70%);
}

#img3 {
  filter: invert(100%);
}

استفاده از تابع opacity() در CSS

تابع فیلتر opacity() یک افکت شفافیت را در یک عنصر اعمال می کند. 

• مقدار %100 (یا 1) هیچ تاثیری ایجاد نمی کند. 
• مقدار %50 (یا 0.5) باعث می شود عنصر %50 شفاف شود. 
• مقدار %0 (یا 0) باعث می شود عنصر کاملا شفاف شود. 

#img1 {
  filter: opacity(80%);
}

#img2 {
  filter: opacity(50%);
}

#img3 {
  filter: opacity(0.2);
}

 استفاده از تابع saturate() در CSS

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

• مقدار %0 (یا 0)باعث می شود عنصر کاملا اشباع نشده باشد. 
• مقدار %100(یا 1) هیچ تاثیری ایجاد نمی کند. 
• مقدار %200 (یا 2) باعث می شود عنصر فوق اشباع شود. 

#img1 {
  filter: saturate(0);
}

#img2 {
  filter: saturate(100%);
}

#img3 {
  filter: saturate(200%);
}

استفاده از تابع sepia() در CSS

تابع فیلتر sepia() یک تصویر را به رنگ سپیا(یک رنگ گرم ترِ خیلی قهوه ای یا زرد) تبدیل می کند. 

• مقدار %100 (یا 1) باعث می شود تصویر کاملا به رنگ سپیا در آید. 
• مقدار %0 (یا 0) هیچ تاثیری ایجاد نمی کند. 

#img1 {
  filter: sepia(1);
}

#img2 {
  filter: sepia(60%);
}

#img3 {
  filter: sepia(0.4);
}

منبع: https://www.w3schools.com/css