التمويه وتغيير الألوان خلف أحد العناصر.
يعتبر كل من الشفافية والتمويه والتأثيرات الأخرى طرقًا مفيدة لإضفاء العمق مع الحفاظ على سياق محتوى الخلفية. وتدعم مجموعة من حالات الاستخدام مثل الزجاج المصبَّر، وتراكبات الفيديو، ورؤوس التنقل شبه الشفافة، والرقابة غير الملائمة على الصور، وتحميل الصور، وما إلى ذلك. قد تتعرّف على هذه التأثيرات من نظامَي تشغيل شائعَين: Windows 10 وiOS.
![مثال على تأثير زجاج بلوري](https://web.dev/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=7&hl=ar)
في السابق، كان من الصعب تنفيذ هذه الأساليب على الويب، حيث كانت تتطلب أساليب أو حلولاً بديلة أقل من مثالية. وفي السنوات الأخيرة، وفّر كل من 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
تأثيرًا واحدًا أو أكثر على عنصر شفاف أو شفاف. لفهم ذلك، ننصحك بالصور أدناه.
![مثلث متراكب على دائرة. لا يمكن رؤية الدائرة من خلال المثلث.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=7&hl=ar)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![مثلث متراكب على دائرة. المثلث شفاف، مما يسمح بظهور الدائرة من خلاله.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=7&hl=ar)
.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 على تقريب الويب من واجهة المستخدم التي تشبه نظام التشغيل.