استخدام Css Filters لعمل تأثيرات جميلة على الصور

فلاتر الصور في Css3 لا تختلف كثيرا عن التي كنا ولا نزال نستخدمها في برامج التعديل على الصور كالفوتوشوب وغيره ، تلك الفلاتر التي تمكننا من التحكم في نسب الشفافية و الألوان و الإضاءة وغيرها. غير أن css3 جاءت بالخاصية filter ومجموعة من القيم عبارة عن دوال functions للتحكم في النسب وعمل تأثيرات جميلة على الصور خصوصا ، بعض هذه الدوال يمكنها التأثير حتى على النصوص وغيرها من عناصر html ، ولكن على العموم تستخدم Css Filters للتأثير على الصور.

لاستخدام الخاصية filter يجب عليك تحديث المتصفح لديك لأن هذه الخاصية غير مدعومة على المتصفحات القديمة ، غير أن بعضها تدعمها عن طريق البادئة -webkit- ، وعموما هذه هي الإصدارات التي يبدأ منها دعم هذه الخاصية بالبادئة وبدونها:

أولا لبدء استخدام Css Filters نكتب الخاصية filter هكذا وأخرى مع إضافة البادئة -webkit- كما في الصورة التالية :

لا عليك من القيمة الآن ، سنشرح كل القيم تباعا كتابة وبالفيديو أيضا ، القيمة الإفتراضية للخاصية filter هي none ويمكنك استخدام هذه القيمة لإلغاء أي فيلتر مطبق مسبقا، والخاصية filter لا تورث .

بعد ذلك نضع قيمة للخاصية وهي واحدة من الدوال Functions التي سنتطرق إليها تباعا :

الدالة ()blur 

تطبق تأثير الضباب على الصورة وتأخذ القيمة ب px كلما زادت القيمة ازدادت ضبابية الصورة ، والقيمة 0 تعني عودة الصورة لطبيعتها بدون تأثير للضباب.

الدالة ()brightness 

تتحكم في لمعان الصورة وتأخذ القيمة ب % ، 0 تعني اختفاء الصورة تماما ويبقى مكانها باللون الأسود ، 100% تعطي الصورة نفسها على طبيعتها بدون تأثير ، أي قيمة أكبر تزيد من شدة لمعان الصورة.

الدالة ()contrast 

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

الدالة ()drop-shadow 

لا تختلف كثيرا عن box-shadow الخاصية المعروفة وتأخذ نفس القيم مفصولة بمسافة :

1- نسبة الظل الأفقي والقيمة ب px (قيمة إجبارية)

2- نسبة الظل العمودي والقيمة ب px (قيمة إجبارية)

3- نسبة blur والقيمة ب px نسبة ضبابية الظل (قيمة اختيارية)

4- نسبة spread والقيمة ب px نسبة الإنتشار (قيمة اختيارية)

5- اللون (قيمة اختيارية) يطبق اللون الأسود افتراضيا في حالة عدم تحديده

مشكلة spread أنه غير مدعوم على Chrome و Safari و Opera لحد الآن ولكن القيم الأخرى تشتغل بدون مشاكل.

الدالة()grayscale 

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

الدالة ()hue-rotate 

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

الدالة ()invert 

تأخذ القيمة ب % ، أعلى قيمة هي 100% وتعكس الصورة بالكامل ، أقل قيمة هي 0 وتبقي الصورة على طبيعتها وهي القيمة الإفتراضية.

الدالة ()opacity 

شبيهة بالخاصية opacity المعروفة وتأخذ القيمة ب %، تتحكم في شفافية الصورة ، القيمة 0 تخفي الصورة تماما بينما 100% تظهر الصورة على طبيعتها وهي القيمة الإفتراضية .

الدالة ()saturate 

تأخذ القيمة ب % ، وهي ثالث دالة تتحكم بإضاءة الصورة بعد ()brightness و ()contrast ، القيمة 0 تظهر الصورة بأخفت شكل ، بينما 100% القيمة الإفتراضية تظهر الصورة على طبيعتها ، وأي قيمة أكبر تزيد من وضوح الصورة.

الدالة ()sepia 

تأخذ القيمة ب % ، القيمة 0 هي الإفتراضية وتظهر الصورة على طبيعتها ، 100% هي القيمة القصوى وتظهر الصورة متأثرة بالكامل بتأثير sepia .

الدالة ()url 

عندما تكون لديك صورة svg معدلة بتأثيرات خاصة من تصميمك يمكنك استدعاؤها كفيلتر تظهر مكان الأصلية وذلك فقط بوضع مسار تواجدها كقيمة للدالة .

شاهد الفيديو التالي للمزيد من الشرح مع الأمثلة :