وقتی صحبت از استایل دهی به صفحات وب می‌شود، فیلترهای CSS یکی از آن ابزارهایی هستند که می‌توانند جلوه‌های بصری جذابی به المان‌ها اضافه کنند. یکی از این فیلترها، brightness() است که به شما اجازه می‌دهد روشنایی یک عنصر را تغییر دهید. این تابع بسیار کاربردی است چون می‌توانید بدون نیاز به تغییر عکس اصلی، ظاهر روشن‌تر یا تیره‌تری به آن بدهید.
فرض کنید یک عکس دارید و می‌خواهید وقتی کاربر روی آن می‌برد، نور آن بیشتر شود تا جلب توجه کند. با استفاده از brightness() به راحتی می‌توانید این کار را انجام دهید. کافی است یک رویداد hover به عنصر مورد نظر اضافه کنید و در آن مقدار brightness را افزایش دهید.
برای استفاده از brightness() مقدار ورودی تابع باید عدد باشد. عدد 1 به معنای حفظ روشنایی فعلی است. هر عدد بزرگتر از 1 عکس را روشن‌تر می‌کند و عددهای کمتر از 1 عکس را تیره‌تر می‌کنند. به همین سادگی!
حتی می‌توانید از این فیلتر در ترکیب با دیگر فیلترها مانند contrast() یا saturate() استفاده کنید و نتایج خلاقانه‌تری به دست آورید. این ابزارهای قدرتمند می‌توانند به ظاهر سایت شما جلوه‌ای زنده‌تر بدهند بدون اینکه نیازی به استفاده از نرم‌افزارهای ویرایش تصویر داشته باشید.
برای مرورگرهای مدرن، فیلترهای CSS پشتیبانی خوبی دارند اما همیشه باید مطمئن شوید که کاربران با مرورگرهای قدیمی‌تر نیز بتوانند از محتوای شما استفاده کنند. به همین دلیل است که استفاده مناسب از این ابزار اهمیت بسیاری دارد.
حالا بیایید یک مثال ساده از نحوه استفاده فیلتر brightness() را ببینیم.
<style>
.image {
filter: brightness(0.8);
transition: filter 0.3s ease;
}
.image:hover {
filter: brightness(1.2);
}
</style>
<img src="image.jpg" alt="Example Image" class="image">
توضیح خط به خط کد:
<style> — این تگ برای نوشتن استایل‌های CSS به کار می‌رود..image — این کلاس برای المان img تعریف شده است.filter: brightness(0.8); — روشنایی پیش‌فرض تصویر را به 80% کاهش می‌دهد.transition: filter 0.3s ease; — یک انتقال نرم 0.3 ثانیه‌ای برای تغییر فیلتر اعمال می‌کند..image:hover — حالت hover برای کلاس image اعمال می‌شود.filter: brightness(1.2); — در حالت hover، روشنایی تصویر را به 120% افزایش می‌دهد.</style> — پایان تگ <style>.<img src="image.jpg" alt="Example Image" class="image"> — المان img که تصویر example.jpg را نمایش می‌دهد و دارای کلاس image است.