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

مقدمة

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

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

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

حياة جديدة لموقع "الفلتر" في CSS

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

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

ما هي وظيفة الفلتر تحديدًا؟ إنّ أسهل طريقة للتفكير في الفلتر هي أنّه خطوة ما بعد المعالجة تُجري تغييرًا سحريًا بعد وضع كل محتوى صفحتك ورسم تفاصيله.

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

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

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

الفلاتر المحدّدة باستخدام SVG وCSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

لنلقِ نظرة على كل منها ونتعرّف على وظائفها.

grayscale(الكمية)

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

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

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

saturate(amount)

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

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

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

invert(amount)

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

التعتيم(amount)

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

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

brightness(amount)

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

contrast(amount)

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

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

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

تظليل القطرات(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); % } }

وفويلا! سيتم تطبيق تنسيق تعريفات فلاتر SVG على كل علامات <div> في المستند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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