مولد مرشح CSS

يتيح لك كل منشئ مرشحات CSS إمكانية تجميع Blur() وBrightness() وContrast() والباقي - ولكن لا أحد منهم تقريبًا يجعل الترتيب مهمًا، لأن معظمهم لا يطبقون المرشحات إلا في تسلسل واحد ثابت. هذه مختلفة: سلسلة التصفية عبارة عن قائمة حقيقية قابلة لإعادة الترتيب تم إنشاؤها باستخدام السحب والإفلات الأصلي بتنسيق HTML5، وإعادة ترتيب وظيفتين يغير بشكل حقيقي وحدات البكسل المقدمة، تمامًا كما يحدث في CSS للإنتاج. يبدو تدوير التمويه ثم التدرج اللوني مختلفًا عن تدوير التدرج اللوني ثم التمويه، ويمكنك الآن معرفة السبب قبل شحنه.

قم بتحميل صورتك الخاصة والوظائف التسع القابلة للتسلسل - التمويه، والسطوع، والتباين، والتشبع، وتدوير اللون، والبني الداكن، والتدرج الرمادي، والعكس، والظل المسقط - وتطبيقها مباشرة عليها كإعلان CSS فعلي لـ "filter" على عنصر `<img>`، وليس عينة محاكاة. أضف وظيفة من التحديد، واسحب صفها لأعلى أو لأسفل القائمة لتغيير موضعها في السلسلة، واضبط شريط التمرير الخاص بها، وقم بتحديث خط المعاينة والسطر القابل للنسخ `filter: ...;` في كل إدخال. قم بإزالة خطوة باستخدام الزر الخاص بها، الموجود في الصف مباشرةً.

تقوم سلسلة ثانية أصغر بإنشاء قيمة "مرشح الخلفية" المطبقة على لوحة التراكب الموضوعة فوق المعاينة، حتى تتمكن من رؤية تأثير الزجاج المصنفر - التقنية الكامنة وراء أشرطة التنقل الشفافة الحديثة والخلفيات المشروطة - دون لمس سلسلة التصفية الخاصة بالصورة الأساسية. إنه يعمل حتى قبل تحميل الصورة، على خلفية العنصر النائب الملونة، حتى تتمكن من طلب تصميم لوحة بلوري في ثوانٍ.

عندما تظهر المعاينة بشكل صحيح، انسخ CSS مباشرة من مربع الإخراج، أو قم بتصدير ملف PNG حقيقي: يتم تسليم سلسلة التصفية نفسها إلى خاصية `ctx.filter` الخاصة بسياق Canvas 2D - والتي تستخدم بناء الجملة المطابق لخاصية CSS `filter` - ويتم تحويل اللوحة القماشية إلى ملف قابل للتنزيل باستخدام `canvas.toBlob()`. تتطابق الصورة المصدرة مع المعاينة المباشرة تمامًا، لأنها يتم إنتاجها بواسطة نفس سلسلة التصفية التي تعمل من خلال نفس العرض البدائي. كل شيء يحدث محليًا في متصفحك؛ لم يتم تحميل صورتك في أي مكان أبدًا.