🎚️مولد مرشحات CSS

دوال filter والوحدات

خاصية CSS filter تطبق تأثيرات على مظهر الصور والعناصر، وتُكتب بترتيب دوال مثل blur و sepia مفصولة بمسافات

• px (بكسل)：دالة blur تحدد نصف قطر التمويه بـ px. عند تحديد 4px، تندمج الألوان في نطاق نصف قطره 4 بكسل
• % (نسبة مئوية)：دوال brightness و sepia تحدد قوة التأثير بـ %. في brightness، 100% هي السطوع الأصلي و 120% تعني أفتح بنسبة 20%
• deg (درجة)：دالة hue-rotate تحدد زاوية الدوران على عجلة الألوان بـ deg. عند تحديد 180deg، ينتقل اللون إلى الجهة المقابلة على عجلة الألوان

لماذا تتغير النتيجة حسب ترتيب الكتابة

تُطبق الدوال في filter من اليسار إلى اليمين، حيث تُطبق كل دالة على نتيجة السابقة. لهذا يؤثر الترتيب على المظهر النهائي. مثلاً، تطبيق السيبيا بعد الأبيض والأسود يترك ظلالاً بنية، بينما تطبيق السيبيا أولاً ثم الأبيض والأسود يزيل هذه الظلال. هذا الأداة تطبق ترتيباً ثابتاً، لكن يمكنك تعديل الكود الناتج لتغيير الترتيب

الفرق بين filter و backdrop-filter

خاصيتا filter و backdrop-filter تستخدمان نفس الدوال، لكن الاختلاف في ما تُطبق عليه التأثيرات

• filter：filter تطبق التأثير على العنصر نفسه (الصور والنصوص وغيرها)
• backdrop-filter：backdrop-filter تطبق التأثير على ما يظهر خلف العنصر، وتُستخدم لإنشاء تأثيرات مثل الزجاج المتجمد