فهم تأثيرات فلتر CSS

مقدمة

الفلاتر هي أداة فعالة يمكن لمؤلفي الويب استخدامها لإنشاء تأثيرات بصرية مثيرة للاهتمام. في هذه المقالة، سنتناول سجلّ تأثيرات الفلاتر ووظيفتها وكيفية استخدامها. سنتناول أمثلة على جميع الفلاتر المحدّدة مسبقًا لخدمة CSS مع بعض الأمثلة. وسنغطي أيضًا اعتبارات الأداء عند استخدامها على أجهزة سطح المكتب والأجهزة المحمولة لأن معرفة تأثير السرعة للفلاتر أمر مهم للحصول على تجربة مستخدم جيدة. وأخيرًا، سنراجع حالة التنفيذ الحالية في المتصفحات الحديثة.

الماضي والحاضر والمستقبل لتأثيرات الفلاتر

نشأت تأثيرات الفلاتر كجزء من مواصفات الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) تم إنشاؤها لتطبيق عدد من تأثيرات الصور المختلفة المستندة إلى وحدات البكسل على رسم متجه. وبمرور الوقت عندما أضاف مورّدو المتصفحات إمكانات رسومات موجّهة يمكن تغيير حجمها (SVG) إلى متصفحاتهم، أصبحت فائدة الفلاتر واضحة. توصل "روبرت أوكالان" من Mozilla إلى فكرة رائعة عن استخدام فلاتر SVG عبر تطبيق CSS على محتوى HTML "عادي". قدم روبرت نموذجًا أوليًا لنسخة مبكرة أظهر مدى فعالية مجموعة الفلاتر ونمط CSS. قرّرت مجموعات عمل CSS وSVG في W3C تنسيق استخدام الفلاتر لكل من HTML وSVG عبر نمط CSS، وبالتالي تم إنشاء سمة "filter" (فلتر) لـ CSS. في الوقت الحالي، تعمل مجموعة مشتركة من الأشخاص الذين يعملون على CSS وSVG على نطاق واسع لجعل الفلاتر مفيدة لجميع المستخدمين. يمكنك الاطّلاع على المواصفات الحالية لكل هذه العناصر هنا.

حياة جديدة لخاصية CSS "الفلتر"

تضرب Deja Vu أحيانًا مطوّر ويب عند رؤية "الفلتر" في أنماط CSS. يرجع ذلك إلى أنّ الإصدارات القديمة من Internet Explorer كانت تتضمن خاصية "فلتر" مكشوفة عبر CSS لإجراء بعض الوظائف الخاصة بالنظام الأساسي. تم إيقاف هذا الإجراء ليحلّ محلّ سمة "الفلتر" العادية التي أصبحت الآن جزءًا من CSS3. لذا، عندما ترى "التصفية" في كل مكان على بعض صفحات الويب القديمة، لن يكون هناك داعٍ للارتباك. فموقع "الفلتر" الجديد هو المكان الذي تتوفر فيه جميع الإجراءات، ويتم تنفيذه في الإصدارات الجديدة من IE تمامًا مثل جميع المتصفحات الحديثة.

كيفية عمل الفلاتر

إذًا، ما الوظيفة التي يؤديها عامل التصفية بالضبط؟ تتمثل أسهل طريقة للتفكير في عامل التصفية

عندما يحمّل المتصفّح صفحة ويب، عليه تطبيق الأنماط وتنفيذ التنسيق ثم عرض الصفحة لكي تكون هناك عناصر يجب الاطّلاع عليها. تبدأ الفلاتر بعد كل هذه الخطوات وقبل نسخ الصفحة إلى الشاشة مباشرةً. ما يفعلونه هو أخذ لقطة للصفحة المعروضة كصورة نقطية، ثم تنفيذ بعض الرسومات الساحرة على وحدات البكسل في اللقطة، ثم رسم النتيجة فوق أعلى صورة الصفحة الأصلية. ويمكنك اعتبارها فلترًا يُوضع على الجزء الأمامي من عدسة الكاميرا. ما تراه من خلال العدسة هو العالم الخارجي الذي تم تعديله بتأثير عامل التصفية.

وهذا يعني بالطبع أنّ رسم صفحة تحتوي على فلاتر عليه مضيع من الوقت، ولكن استخدامها بطريقة صحيحة سيكون له تأثير ضئيل جدًا في سرعة موقعك الإلكتروني.

ومثلما يمكنك تكديس عدد من الفلاتر أمام بعضها في عدسة الكاميرا، يمكنك تطبيق عدد عشوائي من الفلاتر واحدًا تلو الآخر لتحقيق جميع أنواع التأثيرات.

الفلاتر التي تم تحديدها باستخدام SVG وCSS

ونظرًا لأن الفلاتر واردة في الأصل من رسومات موجّهة يمكن تغيير حجمها (SVG)، هناك طرق مختلفة لتعريفها واستخدامها. يحتوي رسومات موجّهة يمكن تغيير حجمها (SVG) نفسه على عنصر <filter> يعرض تعريفات لتأثيرات الفلاتر المختلفة باستخدام بنية XML. تستفيد مجموعة الفلاتر التي تحددها CSS من نموذج الرسومات نفسه، لكنها تعريفات أبسط بكثير يسهل استخدامها في ورقة الأنماط.

ويمكن التعبير عن معظم فلاتر CSS من حيث فلاتر SVG، وتتيح لك CSS أيضًا الإشارة إلى فلتر محدّد في SVG إذا أردت ذلك. لقد بذل مصممو عوامل تصفية CSS جهودًا كبيرة لتسهيل عملية تطبيق الفلتر لمؤلفي الويب، ولذلك ستتناول هذه المقالة فقط عوامل التصفية المتاحة مباشرة من CSS، مع تجاهل تعريفات SVG في الوقت الحالي.

كيفية تطبيق فلتر CSS

يتم استخدام الفلاتر من CSS عن طريق استخدام خاصية "filter" المطبقة على أي عنصر مرئي في صفحة الويب. مثال بسيط للغاية، يمكنك كتابة شيء مثل

div { { % mixin filter: grayscale(100%); % } }

وسيؤدي ذلك إلى تحويل المحتوى داخل كل عناصر <div>على الصفحة إلى اللون الرمادي. وهو أمر رائع لجعل صفحتك تبدو وكأنها صورة تلفزيونية من أربعينيات القرن الماضي.

تأخذ معظم الفلاتر شكلاً من أشكال المعلَمات للتحكم في مقدار التصفية التي يتم تطبيقها. لذلك على سبيل المثال، إذا أردت تصميم المحتوى ليكون في منتصف الطريق بين اللون الأصلي ونسخة تدرّج الرمادي، فستفعل ذلك على النحو التالي:

div { { % mixin filter: grayscale(50%); % } }

إذا أردت تطبيق عدد من الفلاتر المختلفة الواحد تلو الآخر، من السهل إجراء ذلك، ما عليك سوى ترتيبها في خدمة CSS على النحو التالي:

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

سيجعل هذا المثال أولاً كل التدرج الرمادي للألوان الأصلية ثم يطبق تأثير بني داكن، وسينتهي به الأمر إلى أن يبدو كما يلي:

بفضل المرونة المتاحة في تطبيق الفلاتر واحدًا تلو الآخر، يمكنك الاستفادة من جميع أنواع التأثيرات، لذا فإنّ تجربة ابتكار نتائج مذهلة متروكة لخيالك.

تأثيرات الفلاتر المتوفرة باستخدام CSS

وبالتالي، تُعدّ آلية فلتر الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) فعالة، ولكنها قد تكون شاقة في الوقت نفسه. ولهذا السبب، تقدّم CSS مجموعة من تأثيرات الفلاتر العادية التي تجعل استخدامها سهلاً للغاية.

لنلقِ نظرة على كلّ من هذه الروابط ونفهم ما يفعلونه.

تدرّج الرمادي(المبلغ)

يؤدي ذلك إلى تحويل اللون في صورة الإدخال إلى ظل رمادي. ويتحكّم "المبلغ" المطبَّق في مقدار الإحالة الناجحة الرمادية التي سيتم تطبيقها. إذا كانت النسبة 100%، فسيكون كل شيء ظلاً باللون الرمادي، أما إذا كانت النسبة هي 0%، فستكون الألوان دون تغيير. يمكنك استخدام رقم النقطة العائمة هنا إذا كنت تفضلها على النسب المئوية، بمعنى أن 0 تعمل مثل 0% بينما تعمل 1.0 تمامًا مثل 100%.

بني داكن(المبلغ)

يساهم ذلك في ظهور الألوان الباهتة باللون البني الداكن كما هو الحال في الصور القديمة. تعمل قيمة "amount" (المبلغ) المطبَّقة بالطريقة نفسها المستخدَمة في فلتر "التدرّج الرمادي"، بمعنى أنّ نسبة 100% تجعل جميع الألوان باللون البني الداكن تمامًا كما تتيح القيم الأصغر حجمًا تطبيق التأثير بنِسب أصغر.

saturate(amount)

يؤدي ذلك إلى تطبيق تأثير تشبّع اللون على الألوان يجعلها تبدو أكثر وضوحًا. إنّه أحد التأثيرات الرائعة التي يمكن أن تجعل الصور تبدو مثل الملصقات أو الرسوم المتحركة.كما يسمح لك هذا التأثير أيضًا باستخدام قيمة أكبر من 100% للتأكيد حقًا على تشبع اللون. إنّه بالتأكيد يمكن أن يجعل الأمور تبدو غير تقليدية إلى حد كبير!

تدرّج اللون(زاوية)

هذا تأثير خاص بتأثير الألوان ويمكن استخدامه للحصول على نتائج مثيرة للاهتمام. ما يفعله هو تحويل الألوان حولها لجعل الصورة المدخلة تبدو مختلفة تمامًا. إذا كان لديك طيف ألوان من الأحمر إلى البنفسجي حول عجلة ألوان، سيأخذ هذا التأثير اللون الأصلي على العجلة كإدخال وتدويره من خلال معلَمة الزاوية للحصول على اللون على العجلة التي تم تدويرها كقيمة للون الناتج. لذلك يتم تبديل جميع الألوان في الصورة بنفس "الزاوية" على العجلة. وهذا بالتأكيد يعد تبسيطًا لما يفعله، ولكنه نأمل أن يكون مفيدًا بدرجة كافية بحيث يكون منطقيًا.

قلب(المبلغ)

يؤدي هذا التأثير إلى قلب الألوان. فإذا كان "المبلغ" المطبَّق على نسبة 100%، يكون الناتج كما لو كان صورة سلبية من الصور القديمة للكاميرات. وكما هو الحال من قبل، سيؤدي استخدام القيم الأصغر من 100% إلى تطبيق التأثير العكسي تدريجيًا.

تعتيم(المبلغ)

إذا كنت تريد أن يظهر المحتوى بشكل شبه شفاف، ننصحك بهذا الخيار. تحدد قيمة "amount" (المبلغ) مدى تعتيم المخرجات. إذًا، تكون القيمة 100% معتمة تمامًا، وبالتالي سيكون الناتج تمامًا مثل المدخل. وعندما تنخفض القيمة إلى أقل من 100%، ستصبح الصورة المُخرجة أقل تعتيمًا (أكثر شفافية) وسيظهر لك عدد أقل منها. يعني هذا بالطبع أنه إذا تداخل مع شيء آخر على الصفحة، ستبدأ العناصر الموجودة أسفله في الظهور. تعني "نسبة" 0% أنّها تختفي تمامًا، ولكن ملاحظة: لا يزال بإمكانك الحصول على أحداث مثل نقرات الماوس وما إلى ذلك لكي تحدث على عناصر شفافة تمامًا، لذا سيكون هذا مفيدًا إذا كنت تريد إنشاء مناطق قابلة للنقر بدون عرض أي معلومات.

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

السطوع(المبلغ)

يشبه ذلك عنصر التحكم في السطوع على تلفزيونك. وهي تضبط الألوان بين الأسود بالكامل واللون الأصلي بما يتناسب مع المعلمة "amount". في حال ضبط هذه القيمة على 0%، لن تظهر لك سوى اللون الأسود، ولكن عندما ترتفع القيمة إلى 100%، سترى المزيد والمزيد من الصورة الأصلية يزداد سطوعها، إلى أن تصل إلى 100% حيث يكون لون الصورة مطابقًا. لا يمكنك بالطبع مواصلة العمل - لذا، فضبط نسبة 200% على نحو يجعل الصورة أكثر سطوعًا بمرتين من الصورة الأصلية - وهذا أمر رائع لضبط اللقطات في إضاءة منخفضة.

contrast(amount)

مزيد من عناصر التحكّم من جهاز التلفزيون سيؤدي ذلك إلى ضبط الفرق بين الأجزاء الأغمق والأفتح في الصورة المدخلة. إذا استخدمت 0%، فسينتهي بك الأمر باللون الأسود كما هو الحال مع "السطوع"، وبالتالي ليس مثيرًا للاهتمام. ومع ذلك، كلما زادت القيمة نحو 100%، يتغير الفرق في مستوى الظلام إلى أن تصل إلى 100% وتصبح الصورة الأصلية مرة أخرى. يمكنك أيضًا تجاوز 100% لهذا التأثير، مما يزيد من الفرق بين الألوان الفاتحة والداكنة بشكل أكبر.

تمويه(نصف القطر)

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

drop-shadow(shadow)

من الجيد أن تتمكّن من إنشاء محتوى يبدو وكأنّه يظهر في الهواء الطلق تحت أشعة الشمس مع وجود ظل على الأرض من خلفه، وهذا بالطبع ما يفعله "التظليل". وهو يأخذ لقطة من الصورة، ويجعلها لونًا واحدًا، ثم يموّهها، ثم يعوض النتيجة قليلاً بحيث تبدو كظل للمحتوى الأصلي. تُعد معلمة "الظل" التي يتم تمريرها أكثر تعقيدًا من مجرد قيمة واحدة. هو سلسلة من القيم مفصولة بمسافة - وبعض القيم اختيارية أيضًا! تتحكم قيم "الظل" في مكان وضع الظل ومقدار التمويه الذي يتم تطبيقه ولون الظل وما إلى ذلك. للحصول على تفاصيل كاملة حول وظيفة قيم "الظل"، تحدد مواصفات خلفيات CSS3 "الظل المربع" بتفصيل كبير. تمنحك بعض الأمثلة أدناه فكرة جيدة عن الاحتمالات المختلفة.

هذه عملية فلترة أخرى مشابهة لوظيفة CSS الحالية المتاحة عبر خاصية "box-shadow". ويعني استخدام أسلوب التصفية أنه قد يتم تسريع الأجهزة عن طريق بعض المتصفحات كما أوضحنا لعملية "التعتيم" أعلاه.

عنوان URL يشير إلى فلاتر SVG

بما أنّ الفلاتر أنشأت كجزء من رسومات موجّهة يمكن تغيير حجمها (SVG)، من المنطقي أن يكون بإمكانك تصميم المحتوى باستخدام فلتر SVG. يُعد هذا أمرًا سهلاً مع اقتراح موقع "الفلتر" الحالي. يتم تحديد جميع الفلاتر في رسومات موجّهة يمكن تغيير حجمها (SVG) من خلال سمة "id" (المعرّف) يمكن استخدامها للإشارة إلى تأثير الفلتر. لذلك، لاستخدام أي فلتر SVG من CSS، ما عليك سوى الرجوع إليه باستخدام بنية "url".

على سبيل المثال، قد يكون ترميز SVG لفلتر معيّنًا على النحو التالي:

<filter id="foo">...</filter>

فمن خلال CSS، يمكنك تنفيذ إجراء بسيط مثل:

div { { % mixin filter: url(#foo); % } }

وفويلا! وسيتم تصميم جميع <div> في المستند باستخدام تعريفات فلاتر SVG.

مخصّص (قريبًا)

ستتوفّر قريبًا فلاتر مخصّصة في الأفق. تستفيد هذه الأدوات من إمكانات وحدة معالجة الرسومات (GPU) الخاصة بالرسومات من أجل استخدام لغة تظليل خاصة لإضفاء تأثيرات مذهلة لا حدود لها. لا يزال هذا الجزء من مواصفات "الفلتر" قيد المناقشة ومتغيرًا، ولكن بمجرد أن يظهر هذا الجزء من متصفح قريب منك، سنحرص على كتابة المزيد عما هو ممكن.

اعتبارات الأداء

إنّ أداء صفحة الويب أو التطبيق هو أحد الأشياء التي يهتم بها كل مطوّر على الويب. تعتبر فلاتر CSS أداة فعالة للتأثيرات المرئية، ولكنها قد تؤثر في أداء موقعك الإلكتروني.

من المهم فهم وظيفتها وتأثيرها في الأداء، لا سيّما إذا أردت أن يعمل موقعك الإلكتروني بشكل جيد على الأجهزة الجوّالة إذا كانت متوافقة مع فلاتر CSS.

أولاً، لا يتم إنشاء جميع الفلاتر بالتساوي! في الواقع، سيتم تشغيل معظم الفلاتر بسرعة كبيرة على أي نظام أساسي وسيكون لها تأثير طفيف للغاية في الأداء. ومع ذلك، فإنّ الفلاتر التي تستخدِم أي نوع من التمويه تكون أبطأ من الفلاتر الأخرى. وهذا لا يعني بالطبع "التمويه" و"تظليل القطرات". وهذا لا يعني أنّه يجب عدم استخدام هاتين الأداتين، ولكن من المفيد معرفة طريقة عملهما.

عند استخدام عنصر blur، يمزج بين الألوان من وحدات البكسل في جميع أنحاء بكسل الإخراج لإنشاء نتيجة مموَّهة. لذلك، لنفترض أن المَعلمة radius هي 2، حينئذٍ يحتاج الفلتر إلى النظر إلى 2 بكسل في كل اتجاه حول كل بكسل للمخرجات لتوليد اللون المختلط. ويحدث ذلك لكل وحدة بكسل للإخراج، ما يعني أنّ هناك الكثير من العمليات الحسابية التي يزداد حجمها عند زيادة radius. بما أنّ blur ينظر في كل اتجاه، فإنّ مضاعفة "النطاق الجغرافي" يعني أنّك بحاجة إلى النظر إلى وحدات البكسل بمعدل 4 مرات، وبالتالي تكون أبطأ بمقدار 4 مرات لكل مضاعفة في radius. يحتوي الفلتر drop-shadow على blur كجزء من تأثيره، لذا فهو يعمل تمامًا مثل blur عند تغيير الجزأين radius وspread من المَعلمة shadow.

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

إذا كنت تستخدم الفلاتر المستندة إلى url التي تشير إلى فلاتر الرسومات الموجّهة التي يمكن تغيير حجمها (SVG)، يمكن أن تحتوي هذه الفلاتر على أي تأثير عشوائي للفلاتر، لذا يجب الانتباه إلى أنّها قد تكون بطيئة أيضًا، لذا احرِص على معرفة تأثير تأثير الفلتر وجرِّبه على جهاز جوّال للتأكّد من أنّ الأداء مناسب.

التوفر في المتصفحات الحديثة

يتوفّر حاليًا عدد من تأثيرات filter لصفحات الأنماط المتتالية (CSS) في المتصفّحات المستندة إلى WebKit وMozilla. نتوقع ظهورها قريبًا في Opera بالإضافة إلى IE10. بما أنّ المواصفات لا تزال قيد التطوير، نفّذ بعض مورّدي المتصفّحات هذه الإجراءات باستخدام بادئات المورّدين. إذًا، عليك استخدام -webkit-filter في WebKit، وفي Mozilla ستحتاج إلى استخدام -moz-filter، وننصحك بمراقبة تطبيقات المتصفحات الأخرى عند ظهورها.

لا تتيح جميع المتصفحات استخدام جميع تأثيرات الفلاتر في الحال، وبالتالي قد تختلف المسافة المقطوعة. في الوقت الحالي، لا يتيح متصفّح Mozilla سوى وظيفة filter: url() فقط، بدون بادئة المورّد، لأنّ هذا الإجراء يسبق استخدام دوال التأثيرات الأخرى.

لقد لخصنا تأثيرات فلاتر CSS المتاحة في المتصفحات المختلفة أدناه مع مؤشرات أداء تقريبية عند تنفيذها في البرامج. تجدر الإشارة إلى أن عددًا من المتصفحات الحديثة بدأ تنفيذ هذه التحديثات في الأجهزة (تسريع وحدة معالجة الرسومات). وعندما يتم إنشاؤها بدعم من وحدة معالجة الرسومات، سيتم تحسين الأداء إلى حد كبير للحصول على التأثيرات الأبطأ. وكالعادة، يعد الاختبار على متصفحات مختلفة أفضل طريقة لتقييم الأداء.

تأثير الفلتر	المتصفحات المتوافقة	عروض أداء
تدرج الرمادي	Chrome	سريع جدًا
سبيدج	Chrome	سريع جدًا
تشبع	Chrome	سريع جدًا
تدوير تدرّج اللون	Chrome	السريعة
قلب الألوان	Chrome	سريع جدًا
opacity	Chrome	يمكن أن يكون بطيئًا
السطوع	Chrome	السريعة
التباين	Chrome	السريعة
تمويه	Chrome	بطيئة ما لم يتم تسريعها
drop-shadow	Chrome	يمكن أن يكون بطيئًا
()url	Chrome، Mozilla	يختلف من سريع إلى بطيء

موارد أخرى جيدة

تطبيق لوحة تجريدية تفاعلية باستخدام فلاتر رائع يتيح لك تجربة العمل الفني ومشاركته. احرص على مراجعة صفحة الفلتر التفاعلي الممتازة لإريك بيدلمان برنامج تعليمي رائع عن الفلاتر مع أمثلة مواصفات مسودة W3C Filter Effects 1.0 الرسمية http://dev.w3.org/fxtf/filters/ مثال واجهة مستخدم تم إنشاؤها باستخدام الفلاتر