مولد فلاتر CSS filter
اضبط القيم لتحصل على سطر filter جاهز، وتُحذف الدوال التي على قيمتها المحايدة ليبقى الكود قصيرا.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
طريقة الاستخدام
- أدخل التمويه، السطوع، التباين، التدرج الرمادي، تدوير اللون والعكس.
- تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
- انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.
طريقة الحساب
filter: blur(px) brightness(%) contrast(%) grayscale(%) hue-rotate(deg) invert(%) opacity(%) saturate(%) sepia(%). القيم المحايدة: blur 0 وbrightness وcontrast وopacity وsaturate عند 100%، والباقي 0. إذا كانت كلها محايدة تكون القيمة none.
مثال
المدخلات: التمويه = 0 px، السطوع = 110 %، التباين = 120 %، التدرج الرمادي = 0 %، تدوير اللون = 0 deg. النتيجة: كود CSS: filter: brightness(110%) contrast(120%);، عدد الدوال: 2.
الحدود والملاحظات
- ترتيب الدوال ثابت هنا، وفي CSS يغيّر الترتيب النتيجة أحيانا، فعدّله يدويا إن احتجت.
- التمويه القوي على صور كبيرة أو backdrop-filter قد يبطئ الصفحة على الهواتف.
أسئلة شائعة عن هذه الأداة
كيف أحوّل صورة إلى أبيض وأسود؟
اجعل التدرج الرمادي 100% فيصبح الكود filter: grayscale(100%).
ما الفرق بين filter وbackdrop-filter؟
filter يطبق التأثير على العنصر نفسه، وbackdrop-filter على ما خلفه، وهو أساس تأثير الزجاج المصنفر.
ما الفرق بين opacity في filter وخاصية opacity؟
النتيجة متقاربة، لكن دالة opacity داخل filter تُركّب مع بقية الفلاتر وقد تستفيد من تسريع الرسوميات.