بودكاست 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 هنا
فلتر الصور الخلفية
تقبل الخاصية backdrop-filter
جميع قيم وظائف الفلتر نفسها مثل filter.
يكمن الفرق بين backdrop-filter وfilter في أنّ السمة backdrop-filter لا تطبّق الفلاتر إلا على الخلفية فقط، حينما تطبّقها السمة filter على العنصر بأكمله.
المثال المثالي في بداية هذا الدرس هو المثال المثالي، لأنك لا تريد تمويه النص ومن الناحية المثالية، فأنت لا تريد إضافة عناصر HTML إضافية. وتتيح إمكانية تطبيق الفلاتر على الخلفية فقط إجراء ذلك.
التحقق من فهمك
اختبر معلوماتك حول عوامل التصفية
أي مما يلي يعد من وظائف فلاتر CSS؟
grayscale()invert()flip()multiply()blur()brightness()هل يمكن لخدمة CSS استخدام فلاتر SVG؟
url() هذا