التمويه وتغيير اللون خلف عنصر.
في السابق، كان من الصعب تطبيق هذه الأساليب على الويب، ما كان يتطلّب عددًا أقل من الحلول أو الحلول المثالية. وفي السنوات الأخيرة، وفّر كل من 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. يعمل إصدار backdrop-filter من Chrome في الإصدار 76 على تقريب الويب من العرض التقديمي لواجهة المستخدم التي تشبه نظام التشغيل.