الفلاتر

The CSS Podcast - 023: Filters

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

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

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

سمة filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

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

blur

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

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

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

ملاحظة: يمكنك أيضًا استخدام القيم العشرية بدلاً من القيم المئوية في الفلاتر مثل brightness. لضبط مستوى سطوع ‎80% باستخدام رقم عشري، اكتب ‎0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

invert

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

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

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

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

url

Browser Support

• 5
• 12
• 3
• 6

Source

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

فلتر الخلفية

Browser Support

• 76
• 79
• 103
• 18

Source

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

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

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

اختبِر معلوماتك حول الفلاتر

أيٌّ ممّا يلي هي دوالّ فلاتر CSS؟

grayscale()

🎉

invert()

🎉

flip()

يُرجى إعادة المحاولة.

multiply()

يُرجى إعادة المحاولة.

blur()

🎉

brightness()

🎉

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

نعم

تتيح دالة الفلترة url() إجراء ذلك.

لا

يُرجى إعادة المحاولة.