مولد مرشح CSS
مرشد
مولد مرشح CSS
يتيح لك منشئ فلاتر CSS إنشاء تأثيرات فلاتر CSS بشكل مرئي مع معاينة حية للصورة. اضبط خصائص الفلتر الفردية باستخدام أشرطة التمرير البديهية وشاهد النتائج على الفور - لا حاجة للتخمين. بمجرد رضاك عن المظهر، انسخ كود CSS الذي تم إنشاؤه والصقه مباشرة في ورقة الأنماط الخاصة بك.
كيفية استخدام
ابدأ بالصورة النموذجية الافتراضية أو قم بتحميل صورتك الخاصة عن طريق سحب وإفلات صورة على منطقة المعاينة أو النقر فوق "تحميل صورة". ثم اضبط أشرطة تمرير الفلتر لتحقيق التأثير المطلوب. يتحكم كل شريط تمرير في خاصية فلتر CSS مختلفة - التمويه، السطوع، التباين، تدرج الرمادي، تدوير الصبغة، العكس، العتامة، التشبع، والبني الداكن. يمكنك أيضًا تمكين ظل السقوط مع إزاحة قابلة للتكوين، تمويه، ولون. جرب أحد الإعدادات المسبقة المضمنة مثل العتيق، الدرامي، أو الأسود كنقاط بداية سريعة. عندما تكون راضيًا، انقر فوق زر النسخ للحصول على كود CSS.
خصائص
- معاينة حية للصورة – شاهد تغييرات الفلتر مطبقة على صورتك في الوقت الفعلي أثناء تحريك أشرطة التمرير
- 10 خصائص للفلتر – تحكم كامل في التمويه، السطوع، التباين، تدرج الرمادي، تدوير الصبغة، العكس، العتامة، التشبع، البني الداكن، وظل السقوط
- تأثيرات معدة مسبقًا – إعدادات مسبقة بنقرة واحدة بما في ذلك العتيق، الدرامي، الرائع، الدافئ، نغمة البني الداكن، التباين العالي، الأسود، الحالم، والباهت
- تحميل صورة – قم بتحميل صورك الخاصة عبر السحب والإفلات أو منتقي الملفات لمعاينة الفلاتر على المحتوى الحقيقي
- بادئات البائع – يتضمن CSS الذي تم إنشاؤه -webkit-filter لتحقيق أقصى قدر من توافق المتصفح
- التحكم في ظل السقوط – اضبط ظل السقوط بدقة باستخدام إزاحة X/Y، ونصف قطر التمويه، ومنتقي الألوان
- نسخ بنقرة واحدة – انسخ كود فلتر CSS الذي تم إنشاؤه على الفور إلى الحافظة الخاصة بك
- زر إعادة الضبط – استعادة جميع أشرطة التمرير بسرعة إلى قيمها الافتراضية
التعليمات
-
ما هي خاصية فلتر CSS وكيف تعمل؟
تطبق خاصية CSS filter التأثيرات الرسومية مثل التمويه أو تغيير الألوان على عرض العنصر. إنها تستخدم دوال الفلتر (blur()، brightness()، contrast()، إلخ) التي تعالج بكسلات العنصر قبل عرضها. يمكن ربط فلاتر متعددة معًا في إعلان واحد، ويتم تطبيقها بالترتيب المدرج.
-
هل تؤثر فلاتر CSS على أداء الصفحة؟
يتم تسريع فلاتر CSS بواسطة وحدة معالجة الرسومات (GPU) في المتصفحات الحديثة، لذا فإن الفلاتر البسيطة مثل السطوع أو التباين لها تأثير ضئيل على الأداء. ومع ذلك، يمكن للفلاتر المعقدة مثل التمويه مع قيم نصف قطر كبيرة أو الفلاتر المطبقة على العديد من العناصر في وقت واحد أن تسبب انخفاضًا في معدل الإطارات، خاصة على الأجهزة المحمولة. للحصول على أفضل أداء، قم بتطبيق الفلاتر على أقل عدد ممكن من العناصر وتجنب تحريك التمويه على مناطق كبيرة.
-
ما هو الفرق بين filter و backdrop-filter في CSS؟
تطبق خاصية filter التأثيرات على العنصر نفسه ومحتوياته، بينما تطبق backdrop-filter التأثيرات على المنطقة خلف العنصر. على سبيل المثال، ينشئ backdrop-filter: blur(10px) تأثير الزجاج المصنفر عن طريق تمويه كل ما هو مرئي من خلال خلفية العنصر، دون التأثير على محتوى العنصر نفسه.
-
ما هي المتصفحات التي تدعم فلاتر CSS؟
يتم دعم فلاتر CSS في جميع المتصفحات الحديثة بما في ذلك Chrome و Firefox و Safari و Edge و Opera. لا يزال Safari يتطلب البادئة -webkit- لبعض دوال الفلتر. لا يدعم Internet Explorer فلاتر CSS على الإطلاق. للحصول على أقصى قدر من التوافق، قم بتضمين كل من تعريفات -webkit-filter و filter القياسية في CSS الخاص بك.
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
أدوات يجب تجربتها
عرض الكلشارك
ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة
