الفلاتر

بودكاست CSS - 023: الفلاتر

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

مجموعة من فلاتر CSS وbackdrop-filter بتطبيق التأثيرات وتمويه العناصر المطلوبة في الوقت الفعلي. يُعد التعتيم والتعتيم اثنان من العديد من الفلاتر المتاحة، لنستعرض معًا سريعًا ما يفعلونه جميعًا وكيفية استخدامه.

السمة filter

دعم المتصفح

  • Chrome: 53.
  • الحافة: 12.
  • Firefox: 35
  • Safari: الإصدار 9.1.

المصدر

يمكنك تطبيق واحد أو أكثر من الفلاتر التالية كقيمة filter إذا طبقت أحد الفلاتر بشكل غير صحيح، ولن تعمل بقية الفلاتر المحدّدة لـ filter.

blur

يطبق هذا تمويهًا غاوسي والوسيطة الوحيدة التي يمكنك تمريرها هي radius، وهو مقدار التمويه الذي يتم تطبيقه. يجب أن تكون هذه الوحدة طولها، مثل 10px. النسب المئوية غير مقبولة.

.my-element {
    filter: blur(0.2em);
}

brightness

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

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

.my-element {
    filter: brightness(80%);
}

contrast

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

اضبط قيمة بين 0% و100% لتقليل مستوى التباين أو زيادته، على التوالي.

.my-element {
    filter: contrast(160%);
}

grayscale

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

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

.my-element {
    filter: grayscale(80%);
}

invert

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

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

.my-element {
    filter: invert(1);
}

opacity

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

يعمل الفلتر opacity() تمامًا مثل السمة opacity، حيث يمكنك تمرير رقم أو نسبة مئوية لزيادة التعتيم أو تقليله. في حال عدم تمرير أي وسيطات، سيكون العنصر مرئيًا بالكامل.

.my-element {
    filter: opacity(0.3);
}

saturate

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

يشبه فلتر تشبُّع اللون إلى حد كبير الفلتر brightness ويقبل الوسيطة نفسها: رقم أو نسبة مئوية. فبدلاً من زيادة أو تقليل تأثير السطوع، يعمل saturate على زيادة تشبُّع اللون أو تقليله.

.my-element {
    filter: saturate(155%);
}

sepia

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

يمكنك إضافة تأثير درجة اللون البني الداكن باستخدام هذا الفلتر الذي يعمل مثل grayscale(). درجة اللون البني الداكن هي تقنية طباعة فوتوغرافية تحول الدرجات السوداء إلى درجات اللون البني لتدفئها. يمكنك ضبط رقم أو نسبة مئوية كوسيطة لـ sepia(). مما يزيد أو يقلل التأثير. يؤدي عدم ضبط أي وسيطات إلى إضافة تأثير بني داكن كامل (يعادل sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

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

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

دعم المتصفح

  • Chrome: 18.
  • الحافة: 12.
  • Firefox: 35
  • Safari: 6-

المصدر

يمكنك استخدام ظل خلفي يعانق بعض الشيء كما تفعل في أداة التصميم، مثل Photoshop مع drop-shadow يتم تطبيق هذا الظل على قناع ألفا مما يجعله مفيدًا جدًا لإضافة ظل إلى صورة مقطوعة. يستخدم الفلتر drop-shadow مَعلمة الظل التي تحتوي على قيم مفصولة بمسافات إزاحة-x، وإزاحة-ص، وتمويه، ولون. تتطابق تقريبًا مع box-shadow، ولكن الكلمة الرئيسية inset وقيمة التوزيع غير متاحة.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

ويمكنك الاطّلاع على المزيد من المعلومات حول الأنواع المختلفة من الظلال في وحدة الظلال.

url

دعم المتصفح

  • Chrome: 5-
  • الحافة: 12.
  • فَيَرفُكس: 3-
  • Safari: 6-

المصدر

يتيح لك فلتر url تطبيق فلتر SVG من ملف أو عنصر SVG مرتبط. يمكنك مزيد من المعلومات حول فلاتر SVG هنا

فلتر الصور الخلفية

دعم المتصفح

  • Chrome: 76.
  • الحافة: 79.
  • Firefox: 103.
  • Safari: 18-

المصدر

فلتر الصور الخلفية جميع قيم دوال الفلتر نفسها مثل filter. الفرق بين backdrop-filter وfilter أنّ السمة backdrop-filter تطبّق الفلاتر على الخلفية فقط، حيث تطبّقه السمة filter على العنصر بالكامل.

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

التحقق من فهمك

اختبر معلوماتك حول عوامل التصفية

أي مما يلي يعد من وظائف فلاتر CSS؟

grayscale()
🎉
invert()
🎉
flip()
يُرجى إعادة المحاولة.
multiply()
يُرجى إعادة المحاولة.
blur()
🎉
brightness()
🎉

هل يمكن لخدمة CSS استخدام فلاتر SVG؟

نعم
تتيح دالة التصفية url() هذا
لا
يُرجى إعادة المحاولة.