بودكاست CSS - 023: الفلاتر
لنفترض أنك بحاجة إلى إنشاء عنصر غامض بعض الشيء، تأثير زجاج بلوري يظهر على الجزء العلوي من الصورة. يجب أن يكون النص نصًا مباشرًا وليس صورة. كيف تفعل ذلك؟
مجموعة من فلاتر CSS وbackdrop-filter
بتطبيق التأثيرات وتمويه العناصر المطلوبة في الوقت الفعلي.
يُعد التعتيم والتعتيم اثنان من العديد من الفلاتر المتاحة،
لنستعرض معًا سريعًا ما يفعلونه جميعًا وكيفية استخدامه.
السمة filter
يمكنك تطبيق واحد أو أكثر من الفلاتر التالية كقيمة
filter
إذا طبقت أحد الفلاتر بشكل غير صحيح،
ولن تعمل بقية الفلاتر المحدّدة لـ filter
.
blur
يطبق هذا تمويهًا غاوسي والوسيطة الوحيدة التي يمكنك تمريرها هي radius
،
وهو
مقدار التمويه الذي يتم تطبيقه.
يجب أن تكون هذه الوحدة طولها، مثل 10px
. النسب المئوية غير مقبولة.
.my-element {
filter: blur(0.2em);
}
brightness
لزيادة سطوع أحد العناصر أو تقليله، نستخدم دالة السطوع. ويتم التعبير عن قيمة السطوع كنسبة مئوية مع التعبير عن الصورة التي لم تتغيّر بقيمة 100%. وتؤدي القيمة 0% إلى تحويل الصورة إلى اللون الأسود تمامًا، وبالتالي فإن القيم بين 0% و100% تجعل الصورة أقل سطوعًا. استخدِم قيمًا تزيد عن 100% لزيادة درجة السطوع.
.my-element {
filter: brightness(80%);
}
contrast
اضبط قيمة بين 0% و100% لتقليل مستوى التباين أو زيادته، على التوالي.
.my-element {
filter: contrast(160%);
}
grayscale
يمكنك تطبيق تأثير تدرّج الرمادي بالكامل باستخدام 1
كقيمة لـ grayscale()
،
أو 0
للحصول على عنصر مشبّع تمامًا.
يمكنك أيضًا استخدام القيم المئوية أو القيم العشرية لتطبيق تأثير التدرج الرمادي الجزئي فقط.
إذا لم تمرر أي وسيطات، فسيصبح العنصر رماديًا تمامًا.
وإذا تجاوزت قيمة تزيد عن %100، سيتم ضبط قيمة محدّدة لها على %100.
.my-element {
filter: grayscale(80%);
}
invert
تمامًا مثل grayscale
،
يمكنك تمرير 1
أو 0
إلى الدالة invert()
لتفعيلها أو إيقافها.
عند تشغيله، تكون ألوان العنصر مقلوبة تمامًا.
يمكنك أيضًا استخدام القيم المئوية أو القيم العشرية لتطبيق عكس جزئي للألوان فقط.
إذا لم تمرِّر أي وسيطات إلى الدالة invert()
،
فسيتم قلب العنصر تمامًا.
.my-element {
filter: invert(1);
}
opacity
يعمل الفلتر opacity()
تمامًا مثل السمة opacity
،
حيث يمكنك تمرير رقم أو نسبة مئوية لزيادة التعتيم أو تقليله.
في حال عدم تمرير أي وسيطات، سيكون العنصر مرئيًا بالكامل.
.my-element {
filter: opacity(0.3);
}
saturate
يشبه فلتر تشبُّع اللون إلى حد كبير الفلتر brightness
ويقبل الوسيطة نفسها:
رقم أو نسبة مئوية.
فبدلاً من زيادة أو تقليل تأثير السطوع،
يعمل saturate
على زيادة تشبُّع اللون أو تقليله.
.my-element {
filter: saturate(155%);
}
sepia
يمكنك إضافة تأثير درجة اللون البني الداكن باستخدام هذا الفلتر الذي يعمل مثل grayscale()
.
درجة اللون البني الداكن هي تقنية طباعة فوتوغرافية تحول الدرجات السوداء إلى درجات اللون البني لتدفئها.
يمكنك ضبط رقم أو نسبة مئوية كوسيطة لـ sepia()
.
مما يزيد أو يقلل التأثير.
يؤدي عدم ضبط أي وسيطات إلى إضافة تأثير بني داكن كامل (يعادل sepia(100%)
).
.my-element {
filter: sepia(70%);
}
hue-rotate
لقد تعرفت على كيفية إشارة تدرج اللون في hsl
إلى دوران بكرة الألوان في
درس الألوان ويعمل هذا الفلتر بطريقة مماثلة.
إذا مررت زاوية، مثل الدرجات أو الانعطافات،
فإنه يغير تدرج جميع ألوان العنصر،
تغيير جزء عجلة الألوان التي يشير إليها. إذا لم تنقل أي وسيطة، لن يؤدي ذلك إلى أي نتيجة.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
يمكنك استخدام ظل خلفي يعانق بعض الشيء كما تفعل في أداة التصميم،
مثل Photoshop مع
drop-shadow
يتم تطبيق هذا الظل على قناع ألفا مما يجعله مفيدًا جدًا لإضافة ظل إلى صورة مقطوعة.
يستخدم الفلتر drop-shadow
مَعلمة الظل التي تحتوي على قيم مفصولة بمسافات إزاحة-x، وإزاحة-ص، وتمويه، ولون.
تتطابق تقريبًا مع box-shadow
،
ولكن الكلمة الرئيسية inset
وقيمة التوزيع غير متاحة.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
ويمكنك الاطّلاع على المزيد من المعلومات حول الأنواع المختلفة من الظلال في وحدة الظلال.
url
يتيح لك فلتر url
تطبيق فلتر SVG من ملف أو عنصر SVG مرتبط.
يمكنك
مزيد من المعلومات حول فلاتر SVG هنا
فلتر الصور الخلفية
فلتر الصور الخلفية
جميع قيم دوال الفلتر نفسها مثل filter
.
الفرق بين backdrop-filter
وfilter
أنّ السمة backdrop-filter
تطبّق الفلاتر على الخلفية فقط،
حيث تطبّقه السمة filter
على العنصر بالكامل.
يُعد المثال في بداية هذا الدرس هو المثال المثالي، لأنك لا ترغب في تعتيم النص، ومن الناحية المثالية، لا تحتاج إلى إضافة عناصر HTML إضافية. وتتيح إمكانية تطبيق الفلاتر على الخلفية فقط إجراء ذلك.
التحقق من فهمك
اختبر معلوماتك حول عوامل التصفية
أي مما يلي يعد من وظائف فلاتر CSS؟
grayscale()
blur()
multiply()
brightness()
invert()
flip()
هل يمكن لخدمة CSS استخدام فلاتر SVG؟