التمويه وتغيير اللون خلف عنصر.
التعتيم والتعتيم والتأثيرات الأخرى هي طرق مفيدة لإضفاء العمق مع الحفاظ على سياق محتوى الخلفية. وتتوافق هذه الإعلانات مع مجموعة من حالات الاستخدام، مثل الزجاج بلوري، وتراكبات الفيديو، وعناوين التنقل الشفافة، والرقابة غير الملائمة على الصور، وتحميل الصور، وما إلى ذلك. قد تتعرّف على هذه التأثيرات من نظامي تشغيل شائعين: Windows 10 وiOS.
في السابق، كان من الصعب تطبيق هذه الأساليب على الويب، ما كان يتطلّب عددًا أقل من الحلول أو الحلول المثالية. وفي السنوات الأخيرة، وفّر كل من Safari وEdge هذه الميزات من خلال خاصية background-filter
(أو -webkit-backdrop-filter
) التي تمزج ديناميكيًا ألوان المقدّمة والخلفية استنادًا إلى وظائف الفلترة. ويتوافق Chrome الآن مع background-filter
، بدءًا من الإصدار 76.
المتصفحات المتوافقة
لأسباب تتعلق بالأداء، يمكنك الرجوع إلى صورة بدلاً من استخدام رمز 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 على تقريب الويب من العرض التقديمي لواجهة المستخدم التي تشبه نظام التشغيل.