التمويه وتغيير الألوان خلف أحد العناصر.
في السابق، كان من الصعب تنفيذ هذه الأساليب على الويب، حيث كانت تتطلب أساليب أو حلولاً بديلة أقل من مثالية. وفي السنوات الأخيرة، وفّر كل من Safari وEdge هذه الإمكانات من خلال السمة background-filter (أو بدلاً من ذلك، السمة -webkit-backdrop-filter)، التي تمزج ديناميكيًا بين ألوان المقدّمة والخلفية استنادًا إلى وظائف الفلترة. يتيح متصفّح Chrome الآن استخدام background-filter، بدءًا من الإصدار 76.
backdrop-filter. جرّب المثال على CodePen.
المتصفحات المتوافقة
لأسباب تتعلق بالأداء، يمكنك الرجوع إلى صورة بدلاً من رمز polyfill عندما لا يكون backdrop-filter متاحًا. ويوضح المثال أدناه هذا الأمر.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
الأساسيات
- تطبّق السمة
backdrop-filterفلترًا واحدًا أو أكثر على عنصر، ما يؤدي إلى تغيير مظهر أي عنصر خلف ذلك العنصر. - يجب أن يكون العنصر المتراكب شفافًا جزئيًا على الأقل.
- سيحصل العنصر المتراكب على سياق تكديس جديد.
تطبِّق CSS backdrop-filter تأثيرًا واحدًا أو أكثر على عنصر شفاف أو شفاف. لفهم ذلك، ننصحك بالصور أدناه.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
توضّح الصورة على اليسار طريقة عرض العناصر المتداخلة في حال عدم استخدام السمة backdrop-filter أو اعتمادها. تُطبِّق الصورة على اليسار تأثير تمويه باستخدام backdrop-filter. لاحظ أنه يستخدم opacity بالإضافة إلى backdrop-filter. بدون opacity، ما مِن حاجة لتطبيق التمويه عليه. من الواضح أنّه إذا تم ضبط السمة opacity على 1 (معتم تمامًا) لن يكون هناك أي تأثير في الخلفية.
تشبه السمة backdrop-filter فلاتر CSS من حيث أنّ جميع وظائف الفلاتر المفضّلة لديك متاحة: blur() وbrightness() وcontrast() وopacity() وdrop-shadow()، وما إلى ذلك. ويسمح أيضًا باستخدام الدالة url() إذا كنت تريد استخدام صورة خارجية كفلتر، بالإضافة إلى الكلمات الرئيسية none وinherit وinitial وunset. هناك تفسيرات لكل هذا على MDN، بما في ذلك أوصاف البنية والفلاتر والقيم.
عند ضبط backdrop-filter على أي قيمة غير none، ينشئ المتصفّح سياق تكديس جديد. قد يتم أيضًا إنشاء جزء مضمَّن، ولكن فقط إذا كان العنصر يحتوي على عناصر تابعة مطلقة وثابتة الموضع.
يمكنك الجمع بين فلاتر للحصول على تأثيرات غنية ورائعة، أو يمكنك استخدام فلتر واحد للحصول على مؤثرات أكثر دقة أو دقة. يمكنك أيضًا دمجها باستخدام فلاتر SVG.
أمثلة
أصبحت تقنيات التصميم والأنماط التي سبق أن تم حجزها لأنظمة التشغيل فعّالة وقابلة للتحقيق باستخدام إعلان CSS واحد. لنلقِ نظرة على بعض الأمثلة.
فلتر واحد
في المثال التالي، يتم تحقيق تأثير الصقيع من خلال الجمع بين اللون والتمويه. يتم توفير التمويه من قِبل backdrop-filter، بينما يأتي اللون من لون خلفية العنصر شبه الشفاف.
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
فلاتر متعددة
ستحتاج أحيانًا إلى عدة فلاتر لتحقيق التأثير المطلوب. لإجراء ذلك، قدِّم قائمة بالفلاتر مفصولة بمسافة. مثلاً:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
في المثال التالي، يحتوي كل جزء من الأجزاء الأربعة على مجموعة مختلفة من فلاتر الصور الخلفية بينما تكون نفس مجموعة الأشكال متحركة خلفها.
تراكبات
يوضّح هذا المثال كيفية تمويه خلفية شبه شفافة لجعل النص قابلاً للقراءة مع مزجه بشكل أنيق مع خلفية الصفحة.
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
تباين النص على خلفيات ديناميكية
كما ذكرنا سابقًا، يسمح backdrop-filter بالتأثيرات ذات الأداء القوي التي قد يكون من الصعب أو المستحيل على الويب. مثال على ذلك هو تغيير الخلفية استجابةً لإحدى الرسوم المتحركة. في هذا المثال، يحافظ backdrop-filter على التباين العالي بين النص وخلفيته على الرغم من ما يجري خلف النص. وهي تبدأ بلون الخلفية التلقائي darkslategray وتستخدم backdrop-filter لعكس الألوان بعد التحويل.
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
الخلاصة
ولقد صوّت أكثر من 560 شخصًا منكم على خطأ Chromium على مدار السنوات القليلة الماضية، ما يعني بوضوح أنّ هذه الميزة هي ميزة CSS التي طال انتظارها. يعمل إصدار Chrome backdrop-filter في الإصدار 76 على تقريب الويب من واجهة المستخدم التي تشبه نظام التشغيل.