بودكاست 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 معلَمة ظل تحتوي على قيم إزاحة وألوان يفصل بين عناصر الإزاحة س، وإزاحة ص، بالإضافة إلى تمويه وألوان.
تتطابق هذه السمة تقريبًا مع السمة 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() هذا الإجراء