در CSS، ویژگی filter به ما این امکان را می‌دهد که افکت‌های بصری مختلفی مانند تاری، روشنایی، کنتراست، سیاه و سفید، معکوس کردن رنگ‌ها و سایر جلوه‌های گرافیکی را روی تصاویر اعمال کنیم.

این ویژگی می‌تواند برای زیباسازی طراحی، ایجاد افکت‌های خاص و بهبود تجربه بصری کاربران مورد استفاده قرار گیرد.

۱. نحوه استفاده از filter در CSS

ویژگی filter را می‌توان مستقیماً روی تصاویر (img) و سایر عناصر HTML اعمال کرد.

✅ سینتکس کلی filter در CSS:

filter: مقدار_فیلتر(درجه) مقدار_فیلتر(درجه) ...;

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

۲. انواع فیلتر های CSS و نحوه استفاده از آن‌ها

✅ ۱. اعمال افکت تاری (blur)

img {
    filter: blur(5px);
}

🔹 نتیجه: تصویر ۵ پیکسل تار (Blur) می‌شود.

🔹 مقدار px مشخص‌کننده میزان تاری تصویر است.

• مقدار بیشتر → تاری بیشتر
• مقدار کمتر → وضوح بیشتر

✅ ۲. تغییر روشنایی (brightness)

img {
    filter: brightness(150%);
}

🔹 نتیجه: روشنایی تصویر ۱۵۰٪ افزایش می‌یابد.

🔹 مقدار brightness بر حسب درصد تنظیم می‌شود:

• 100% → مقدار پیش‌فرض
• 200% → دو برابر روشن‌تر
• 50% → نصف روشنایی

✅ ۳. تغییر کنتراست (contrast)

img {
    filter: contrast(200%);
}

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

🔹 مقدار کنتراست:

• 100% → مقدار عادی
• مقدار کمتر از 100% → کنتراست کاهش می‌یابد (تصویر کم‌رنگ‌تر می‌شود).
• مقدار بیشتر از 100% → کنتراست افزایش می‌یابد (تصویر با رنگ‌های قوی‌تر نمایش داده می‌شود).

✅ ۴. اعمال افکت سیاه و سفید (grayscale)

img {
    filter: grayscale(100%);
}

🔹 نتیجه: تصویر کاملاً سیاه و سفید می‌شود.

🔹 مقدار grayscale بین 0% تا 100% است:

• 0% → تصویر رنگی
• 100% → تصویر کاملاً سیاه و سفید

✅ ۵. معکوس کردن رنگ‌ها (invert)

img {
    filter: invert(100%);
}

🔹 نتیجه: رنگ‌های تصویر معکوس می‌شوند.

🔹 مقدار invert بین 0% و 100% متغیر است:

• 0% → بدون تغییر
• 100% → کاملاً معکوس

✅ کاربرد: ایجاد افکت شب و حالت تیره (Dark Mode) برای تصاویر.

✅ ۶. تنظیم میزان شفافیت (opacity)

img {
    filter: opacity(50%);
}

🔹 نتیجه: تصویر نیمه‌شفاف می‌شود.

🔹 مقدار opacity بین 0% (کاملاً شفاف) و 100% (کاملاً قابل مشاهده) است.

✅ ۷. تغییر شدت رنگ (saturate)

img {
    filter: saturate(300%);
}

🔹 نتیجه: رنگ‌های تصویر اشباع شده و بسیار زنده‌تر به نظر می‌رسند.

🔹 مقدار saturate بر حسب درصد تنظیم می‌شود:

• 100% → مقدار عادی
• کمتر از 100% → رنگ‌ها کم‌رنگ‌تر
• بیشتر از 100% → رنگ‌ها اشباع‌تر

✅ کاربرد: ایجاد افکت‌های رنگی خاص روی تصاویر.

✅ ۸. تغییر رنگ به قهوه‌ای (افکت قدیمی) (sepia)

img {
    filter: sepia(100%);
}

🔹 نتیجه: تصویر به رنگ قهوه‌ای متمایل شده و افکت قدیمی پیدا می‌کند.

🔹 مقدار sepia بین 0% (بدون افکت) و 100% (کاملاً قهوه‌ای) است.

✅ کاربرد: شبیه‌سازی عکس‌های قدیمی و کلاسیک.

✅ ۹. ترکیب چندین فیلتر هم‌زمان

img {
    filter: brightness(120%) contrast(150%) blur(3px);
}

🔹 نتیجه:
✅ روشنایی ۲۰٪ افزایش می‌یابد.
✅ کنتراست ۵۰٪ بیشتر می‌شود.
✅ تصویر ۳ پیکسل تار می‌شود.

✅ کاربرد: ایجاد افکت‌های ترکیبی پیشرفته و زیبا برای تصاویر.

۳. فیلترها روی کل صفحه و پس‌زمینه

فیلترها فقط روی تصاویر اعمال نمی‌شوند! می‌توان آن‌ها را روی پس‌زمینه صفحه، متن و سایر عناصر HTML نیز اعمال کرد.

✅ ۱. اعمال فیلتر روی کل صفحه (پس‌زمینه سایت)

body {
    background: url("background.jpg") no-repeat center center fixed;
    background-size: cover;
    filter: brightness(80%) blur(2px);
}

✅ نتیجه:

• تصویر پس‌زمینه ۲۰٪ تیره‌تر می‌شود.
• تصویر پس‌زمینه ۲ پیکسل تاری دارد.

✅ ۲. اعمال فیلتر روی متن (text-shadow + filter)

h1 {
    color: white;
    text-shadow: 2px 2px 5px black;
    filter: blur(1px);
}

✅ نتیجه:

• متن کمی تار و دارای سایه می‌شود.
• مناسب برای افکت‌های خاص روی تایپوگرافی.

۴. نتیجه‌گیری

✅ ویژگی filter در CSS امکان اعمال افکت‌های مختلف روی تصاویر را فراهم می‌کند.
✅ می‌توان چندین فیلتر را هم‌زمان ترکیب کرد تا افکت‌های جذاب‌تر و پیشرفته‌تری ایجاد شود.
✅ از filter می‌توان روی پس‌زمینه، متن و حتی کل صفحه نیز استفاده کرد.
✅ برای ایجاد حالت‌های خاص مانند تصاویر قدیمی، افکت‌های شب، کاهش روشنایی و تنظیم رنگ، filter یک ابزار بسیار قدرتمند است.