CSS/filter

الخاصية filter في CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور <img> والخلفيات background والإطارات border.

بطاقة الخاصية

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	نعم
القيمة المحسوبة	كما حُدِّدَت.

هنالك العديد من الدوال الموجودة في CSS لتطبيق تأثيرات مُعرَّفة مسبقًا، ويمكن الإشارة أيضًا إلى تأثير SVG باستخدام رابط URL إلى العنصر filter في مستند SVG.

/* SVG رابط إلى تأثير */
filter: url("filters.svg#filter-id");

/* <filter-function> قيم */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* عدِّة مرشحات مُطبَّقة معًا */
filter: contrast(175%) brightness(3%);

/* القيم العامة */
filter: inherit;
filter: initial;
filter: unset;

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

لن يكون للخاصية filter أي تأثير على أبعاد العناصر، على الرغم من أنَّ تأثير بعض المرشحات قد يؤدي إلى الرسم خارج حدود العنصر.

عند تطبيق عدِّة مرشحات على العنصر، فإنَّ ترتيب تطبيق تلك المرشحات له أثرٌ على الشكل النهائي للعنصر.

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

دوال المرشحات

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

تأخذ بعض الدوال القيم كنسب مئوية (مثل 32%) وتقبل أيضًا تحديد النسبة كرقم عشري (مثل 0.32) إلا إذا ذُكِرَ خلاف ذلك.

الدالة url()‎

تقبل هذه الخاصية رابط URI يشير إلى مُرشِّح SVG، والذي يمكن أن يكون مضمّنًا في ملف XML خارجي.

filter: url(resources.svg#c1)

الدالة blur()‎

تطبيق تأثير الضبابية (Gaussian blur) على الصورة المُحدَّدة، وتقبل هذه الدالة وسيطًا هو radius الذي يُعرِّف قيمة الانحراف المعياري (standard deviation) لدالة تأثير الضبابية، أي ما هو عدد البكسلات التي ستُدمَج مع بعضها بعضًا، لذا سيؤدي الرقم الكبير إلى زيادة تأثير الضبابية. يمكن أن تكون قيمة الوسيط المُمرَّر هي قيمة طولية <length> لكن لا يُسمَح بالنسب المئوية.

filter: blur(5px)

الدالة brightness()‎

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

القيم الأكبر من 100% ستؤدي إلى زيادة سطوع الصورة، وكلما زادت القيمة زاد سطوع الصورة. تقبل هذه الخاصية النسب المئوية والأرقام العشرية.

filter: brightness(0.5)

الدالة contrast()‎

تغيير تباين الصورة، والقيمة 0% ستجعل الصورة رمادية الألوان تمامًا، أما القيمة 100% فستترك الصورة دون تعديل، ويُسمَح باستخدام القيم الأكبر من 100% مما يزيد من تباين الصورة. تقبل هذه الخاصية النسب المئوية والأرقام العشرية.

filter: contrast(200%)

الدالة drop-shadow()‎

تطبيق تأثير الظلال على الصورة المعطية، وتقبل هذه الدالة ما تقبله الخاصية box-shadow باستثناء الكلمة المحجوزة inset.

القيمة <offset-x> أو <offset-y> (إجبارية)

قيمتان طوليتان <length> تضبطان مدى إزاحة الظل عن العنصر. القيمة <offset-x> تضبط الإزاحة الأفقي، وستؤدي القيم السالبة إلى إظهار الظل على الطرف الأيسر للعنصر. بينما القيمة <offset-y> تؤدي إلى ضبط الإزاحة الرأسية، والقيم السالبة ستؤدي إلى إظهار الظل فوق العنصر. وإذا كانت كلتا القيمتين 0 فسيكون الظل موجودًا خلف العنصر مباشرةً (لكن قد يكون له تأثير الضبابية blur إذا ضُبِطَت القيمة <blur-radius> أو <spread-radius>).

القيمة <blur-radius> (اختيارية)

هذه هي ثالث قيمة تقبلها هذه الدالة، وكلما كبرت القيمة زاد تأثير الضبابية، وبالتالي سيصبح الظل أكبر وأكشف لونًا، ولا يُسمَح باستخدام قيم سالبة، والقيمة الافتراضية هي 0 (أي أنَّ حافة الظل «حادة»)، ولا توفِّر المواصفة خوارزمية دقيقة لحساب نصف قطر تأثير الضبابية، فالأمر متروك للمتصفحات.

القيمة <spread-radius> (اختيارية)

هذه هي رابع قيمة تقبلها هذه الدالة، والقيم الموجبة لها ستؤدي إلى جعل الظل يتوسع ويكبر، والقيم السالبة ستجعل الظل يتقلص ويصغر، وإذا لم تُحدَّد هذه القيمة فستكون 0 (أي أنَّ قياس الظل سيبقى كما هو).

ملاحظة: متصفحات WebKit (وربما غيرها) لا تدعم هذه القيمة، ولن يُعرَض تأثير الظلال إن أُضيفَت إلى وسائط الدالة. لذا حاول تجنّب استخدام هذه القيمة.

القيمة <color>

لون الظل، راجع صفحة القيمة <color> لتفاصيل عن طرائق تحديد هذه القيمة. يجدر بالذكر أنَّه إذا لم تُحدَّد هذه القيمة فاللون المستخدم سيكون تابعًا للمتصفح، وتكون قيمته عادةً مساويةً لقيمة الخاصية color (أي currentColor).

filter: drop-shadow(16px 16px 10px black)

الدالة grayscale()‎

تحويل ألوان الصورة إلى التدرج الرمادي، وتقبل هذه الدالة نسبةً مئويةً تُحدِّد مقدار التحويل، فالقيمة 100% ستجعل الصورة رمادية بالكامل، بينما القيمة 0% ستبقي على الصورة دون تعديل. تقبل هذه الخاصية النسب المئوية والأرقام العشرية، والقيم التي تزيد عن 100% سيعدها المتصفح على أنها 100%، وإذا لم تُحدَّد قيمة لهذه الدالة فالقيمة الافتراضية هي 100% (أي تحويل الصورة إلى تدرج الرمادي).

filter: grayscale(100%)

الدالة hue-rotate()‎

تدوير القيمة اللونية لجميع ألوان الصورة، وتقبل هذه الدالة قيمةً زاويّةً تُحدِّد عدد الدرجات حول الدائرة اللونية التي يجب تعديلها، والقيمة 0deg ستترك الصورة دون تعديل، ولا توجد قيمة قصوى، إذ إنَّ القيم الأكبر من 360deg ستكمل دورةً كاملةً حول الدائرة اللونية.

يمكن فهم عمل هذه الدالة بتخيل الدائرة اللونية، التي يكون لكل لون فيها زاوية معيّنة، وإذا بدأت بنقطة معيّنة في الدائرة (أي أحد الألوان) فيمكنك التحرك من تلك النقطة إلى نقطة أخرى عبر الدوران باستخدام زاوية معيّنة. وما تفعله هذه الدالة هو تبديل كل لون بلونٍ آخر بالدوران بقيمة الزواية المُحدَّدة.

filter: hue-rotate(90deg)

الدالة invert()‎

عكس ألوان الصورة، وتقبل هذه الدالة نسبةً مئويةً تُحدِّد مقدار التحويل، فالقيمة 100% ستجعل ألوان الصورة معكوسةً بالكامل، بينما القيمة 0% ستبقي على الصورة دون تعديل. تقبل هذه الخاصية النسب المئوية والأرقام العشرية، والقيم التي تزيد عن 100% سيعدها المتصفح على أنها 100%، وإذا لم تُحدَّد قيمة لهذه الدالة فالقيمة الافتراضية هي 100% (أي عكس ألوان الصورة كلها).

filter: invert(100%)

الدالة opacity()‎

تطبيق تأثير الشفافية على الصورة، وتقبل هذه الدالة وسيطًا واحدًا هو مقدار الشفافية، فالقيمة 0% ستجعل الصورة شفافةً تمامًا، أما القيمة 100% فتبقي عليها كما هي، وتقبل هذه الخاصية النسب المئوية والأرقام العشرية، والفرق بينها وبين الخاصية opacity هي أنَّ بعض المتصفحات قد تدعم التسارع العتادي (hardware-acceleration) لدوال الخاصية filter على النقيض من الخاصية opacity، مما يزيد من الأداء.

الدالة saturate()‎

تغيير إشباع الصورة، وتقبل هذه الدالة وسيطًا واحدًا هو مقدار تغيير الإشباع، فالقيمة 0% تعني إزالة إشباع ألوان الصورة تمامًا، والقيمة 100% ستترك الألوان دون تغيير، ويُسمَح باستخدام القيم الأكبر من 100% مما يزيد من إشباع ألوان الصورة. تقبل هذه الخاصية النسب المئوية والأرقام العشرية.

filter: saturate(200%)

الدالة sepia()‎

تحويل ألوان الصورة إلى البني الداكن (sepia، وهو اللون المُميّز للصور القديمة)، وتقبل هذه الدالة وسيطًا واحدًا هو مدى تحويل ألوان الصورة إلى البني الداكن، فالقيمة 100% تغيّر كل ألوان الصورة إلى البني الداكن، والقيمة 0% تترك الصورة على ما هي عليه. تقبل هذه الخاصية النسب المئوية والأرقام العشرية، والقيم التي تزيد عن 100% سيعدها المتصفح على أنها 100%، وإذا لم تُحدَّد قيمة لهذه الدالة فالقيمة الافتراضية هي 100% (أي تحويل ألوان الصورة إلى البني الداكن).

filter: sepia(100%)

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	18.0 (مع السابقة -webkit-) 53.0	35	غير مدعومة	15.0 (مع السابقة -webkit-) 40.0	6.0 (مع السابقة -webkit-)

على النقيض من متصفح IE، يدعم متصفح Edge الخاصية filter.

البنية العامة

البنية الرسمية

filter: none | <filter-function-list>;

حيث:

<filter-function-list> = [ <filter-function> | <url> ]+

حيث:

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>

حيث:

<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )

حيث:

<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

انظر أيضًا

• صفحة الخاصية  color التي تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations).

مصادر ومواصفات

• مسودة Filter Effects Module Level 1.