🎚️تولیدکننده فیلتر CSS

توابع و واحدهای filter

ویژگی CSS filter برای اعمال اثرات بر تصاویر یا المان‌ها است و توابعی مانند blur و sepia را با فاصله نوشته می‌کند.

• px (پیکسل)：تابع blur برای تعیین شعاع تار بر حسب px است. وقتی 4px مشخص شود، رنگها در محدوده‌ای 4 پیکسل یکپارچه می‌شوند.
• % (درصد)：توابع brightness و sepia میزان اثر را بر حسب % مشخص می‌کنند. در تابع brightness، 100% روشنایی اصلی و 120% 20 درصد روشن‌تر است.
• deg (درجه)：تابع hue-rotate زاویه چرخش رنگ را بر حسب deg مشخص می‌کند. وقتی 180deg مشخص شود، رنگ به سمت رنگ مقابل چرخش می‌کند.

چرا نتیجه با تغییر ترتیب متفاوت است؟

توابع در filter از چپ به راست اعمال می‌شوند و هر اثر بر نتیجه اثر قبلی اعمال می‌شود. بنابراین تغییر ترتیب می‌تواند نتیجه را تغییر دهد. برای مثال، سیاه و سفید کردن و سپس اعمال sepia رنگ قهوه‌ای را باقی می‌گذارد، اما اعمال sepia و سپس سیاه و سفید کردن آن را حذف می‌کند. این ابزار ترتیب اعمال را ثابت نگه‌داشته است، اما می‌توانید کد CSS تولیدی را ویرایش کنید.

تفاوت با backdrop-filter

filter و backdrop-filter توابع یکسانی را استفاده می‌کنند اما هدف اعمال اثر متفاوت است.

• filter：filter اثرات را بر روی المان تعیین‌شده (تصاویر یا متن) اعمال می‌کند.
• backdrop-filter：backdrop-filter اثرات را بر روی بخشی که پس از المان دیده می‌شود اعمال می‌کند و برای ایجاد اثر شیشه مات استفاده می‌شود.