مرشحات CSS3 (Filters)

تقدم تأثيرات الفلاتر CSS3 طريقة سهلة لتطبيق تأثيرات الفيديو على الصور.

فهم وظائف الفلاتر CSS3

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

يمكن تطبيق تأثيرات الفلاتر باستخدام خاصية filter CSS3 على العناصر، وتقبل هذه الخاصية ترتيبًا واحدًا أو أكثر من وظائف الفلاتر. مثال على الاستخدام كالتالي:

filter:	　blur()　|　brightness()　|　contrast()　|　drop-shadow()　|　grayscale()　|　hue-rotate()　|　invert()　|　opacity()　|　sepia()　|　saturate()　|　url();

تحذير:لا يدعم متصفح Internet Explorer أي نسخة الحالي تأثير الفلاتر CSS3. يدعم إصدارات Internet Explorer القديمة خاصية filter غير المعيارية لإنشاء تأثيرات مثل الشفافية، ولكن تم إلغاء هذه الميزة.

تأثير الغبار

يمكن استخدام ميزة blur() في Photoshop مثل تأثير الغبار العكسي للتطبيق على العناصر. تتخذ هذه الوظيفة قيمة الطول CSS كمعلمة لتحديد نصف قطر الغبار. ستؤدي القيم الأكبر إلى غبار أكثر. إذا لم يتم تقديم المعلمة، يتم استخدام القيمة 0.

img　{
　　　　-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
　　　　filter: blur(5px);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

ضبط لمعان الصورة

يمكن استخدام وظيفة brightness() لضبط لمعان الصورة. القيمة 0% تخلق صورة سوداء بالكامل. بينما القيمة 100% أو 1 تحافظ على الصورة كما هي. القيم الأخرى هي مضاعفات خطية للآثار.

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

img.bright {
　　　　-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
　　　　filter: brightness(200%);
}
img.dark {
　　　　-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
　　　　filter: brightness(50%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تعديل درجة تباين الصورة

وظيفة contrast() تستخدم لتعديل درجة التباين في الصورة. القيمة 0% تخلق صورة سوداء بالكامل. بينما القيمة 100% أو 1 تحافظ على الصورة كما هي. يسمح أيضًا بالقيم أعلى من 100% لتقديم نتائج تباين أقل. إذا كان معامل الكمية مفقودًا أو تم تمريره، يتم استخدام القيمة 1.

img.bright {
　　　　-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
　　　　filter: contrast(200%);
}
img.dim {
　　　　-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
　　　　filter: contrast(50%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

إضافة ظل إلى الصورة

يمكنك استخدام وظيفة drop-shadow() لتطبيق تأثير الظل على الصور في Photoshop وما إلى ذلك. هذا الوظيفة تشبهbox-shadowخصائص.

img　{
　　　　-webkit-filter:　drop-shadow(4px　4px　10px　orange);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　drop-shadow(4px　4px　10px　orange);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تحويل الصورة إلى درجات الرمادي

يمكن استخدام الوظيفة grayscale() لتحويل الصورة إلى درجات الرمادي. القيمة 100% تعني درجات الرمادي الكامل. القيمة 0% تترك الصورة كما هي. القيم بين 0% و100% هي في مقياس التكامل. إذا كان يفتقر إلى معامل الكمية، يتم استخدام القيمة 0.

img.complete-gray　{
　　　　-webkit-filter:　grayscale(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　grayscale(100%);
}
img.partial-gray　{
　　　　-webkit-filter:　grayscale(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　grayscale(50%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تطبيق دوران الألوان على الصورة

الوظيفة hue-rotate() تطبق دوران الألوان على الصورة. يعين المعامل القيم التي يتم تعديلها من دائرة الألوان للعينة الصور. القيمة 0deg تترك الصورة كما هي. إذا كان angle يفتقر إلى معامل ' '، يتم استخدام القيمة 0deg. لا يوجد قيمة أعلى، ويعود التأثير إلى 360deg.

img.hue-normal　{
　　　　-webkit-filter:　hue-rotate(150deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　hue-rotate(150deg);
}
img.hue-wrap　{
　　　　-webkit-filter:　hue-rotate(480deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　hue-rotate(480deg);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تأثير العكس

يمكن استخدام دالة invert() لتطبيق تأثير العكس مثل Photoshop على الصورة. القيمة 100% أو 1 هي العكس الكامل. القيمة 0% تترك المدخلات كما هي. القيم بين 0% و100% هي مضاعفة خطية للeffet. إذا كان parameter 'amount' مفقودًا، يتم استخدام القيمة 0. لا يُسمح باستخدام القيم السلبية.

img.partially-inverted　{
　　　　-webkit-filter:　invert(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　invert(80%);
}
img.fully-inverted　{
　　　　-webkit-filter:　invert(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　invert(100%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تطبيق عدم الشفافية على الصورة

يمكن استخدام الوظيفة opacity() لضبط شفافية الصورة. القيمة 0% هي شفافية كاملة. القيمة 100% أو 1 تترك الصورة كما هي. القيم بين 0% و100% هي مضاعفة خطية للeffet. إذا كان parameter 'amount' مفقودًا، يتم استخدام القيمة 1. هذا الوظيفة تشبهopacityخصائص.

img　{
　　　　-webkit-filter:　opacity(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　opacity(80%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تطبيق تأثير البني القهوي على الصورة

الوظيفة sepia() تتحول الصورة إلى اللون البني القهوي. القيمة 100% أو 1 هي اللون البني الداكن. القيمة 0% تترك الصورة كما هي. القيم بين 0% و100% هي مضاعفة خطية للeffet.

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(30%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي:

تعديل تشبع الصورة

يمكن استخدام وظيفة saturate() لضبط درجة التشبع في الصورة. القيمة 0% تعني عدم التشبع تمامًا. القيمة 100% تؤدي إلى الحفاظ على الصورة كما هي. القيم الأخرى هي مضاعفات خطية للنتيجة. يسمح أيضًا بالقيم فوق 100% لتقديم نتائج تشبع زائدة. إذا كان Parameter 'amount' مفقودًا، يتم استخدام القيمة 1.

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

—النتيجة المطلوبة من المثال أعلاه كما يلي: