ویژگی "filter" در CSS یکی از ویژگی‌های جذاب و کاربردی است که برای اعمال افکت‌های بصری مختلف روی عناصر HTML استفاده می‌شود. این ویژگی به شما اجازه می‌دهد تا جلوه‌های مختلفی مانند تاری، روشنایی، کنتراست، و حتی تبدیل رنگ‌ها را به راحتی بر روی تصاویر و دیگر المان‌های وب‌سایت خود اعمال کنید. بدون نیاز به استفاده از نرم‌افزار‌های ویرایش تصویر پیچیده، می‌توانید با چند خط کد ساده تغییرات جذابی ایجاد کنید.
استفاده از ویژگی "filter" در پروژه‌های وب به طراحان و توسعه‌دهندگان انعطاف‌پذیری بیشتری می‌دهد. به کمک این ویژگی می‌توانید حال و هوای خاصی به صفحات وب خود ببخشید و تجربه کاربری بی‌نظیری ایجاد کنید. برای مثال، می‌توانید روی یک تصویر پس‌زمینه فیلتر بلور (blur) اعمال کنید تا متون روی آن راحت‌تر قابل خواندن باشند، یا از فیلتر گرما (sepia) برای ایجاد حس نوستالژیک در تصاویر استفاده کنید.
بگذارید با یک مثال ساده شروع کنیم. فرض کنید می‌خواهید تصویری را تار (blur) کنید:
<style>
img.blurry {
filter: blur(5px);
}
</style>
<img src="your-image.jpg" alt="A beautiful scenery" class="blurry">
در مثال بالا، ما با استفاده از ویژگی "filter" و مقدار "blur" فیلتر تاری را با مقدار ۵ پیکسل اعمال می‌کنیم. این مقدار بیانگر سطح تاری است. هر چه عدد بزرگ‌تر باشد، تصویر بیشتر تار می‌شود.
حال توضیحی خط به خط از کد بالا ارائه می‌دهم:
<style> → شروع تعریف استایل CSS درون تگ استایل.img.blurry → انتخابگر CSS برای هدف قرار دادن تصویر با کلاس "blurry".filter: blur(5px); → اعمال فیلتر بلور با مقدار ۵ پیکسل برای تار کردن تصویر.</style> → پایان بخش استایل CSS.<img src="your-image.jpg" → تگ HTML برای اضافه کردن یک تصویر با آدرس ذکر شده.alt="A beautiful scenery" → متن جایگزین برای تصویر در مواردی که تصویر بارگذاری نمی‌شود.class="blurry" → اختصاص کلاس "blurry" به تصویر برای اعمال استایل CSS.</img> → پایان تگ تصویر.
به کمک این ویژگی می‌توانید به راحتی جذابیت بصری صفحات وب خود را افزایش دهید و تجربه بهتری برای کاربران خود ایجاد کنید.