محو شدن و تغییر رنگ در پشت یک عنصر.
از لحاظ تاریخی، پیاده‌سازی این تکنیک‌ها در وب دشوار بود و به هک‌ها یا راه‌حل‌های کاملی نیاز نداشتند. در سال‌های اخیر، هم Safari و هم Edge این قابلیت‌ها را از طریق background-filter (و در عوض، ویژگی -webkit-backdrop-filter ) ارائه کرده‌اند، که به‌طور پویا رنگ‌های پیش‌زمینه و پس‌زمینه را بر اساس توابع فیلتر ترکیب می‌کند. اکنون Chrome از background-filter پشتیبانی می‌کند که از نسخه ۷۶ شروع می‌شود.
backdrop-filter . مثال را در CodePen امتحان کنید.پشتیبانی از مرورگر
به دلایل عملکرد، زمانی که backdrop-filter پشتیبانی نمی‌شود، به جای polyfill به یک تصویر برگردید. مثال زیر این را نشان می دهد.
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
مبانی
- ویژگی
backdrop-filterیک یا چند فیلتر را بر روی یک عنصر اعمال می کند و ظاهر هر چیزی را که در پشت عنصر قرار دارد تغییر می دهد. - عنصر روکش باید حداقل تا حدی شفاف باشد.
- عنصر همپوشانی یک زمینه انباشتگی جدید دریافت می کند.
backdrop-filter CSS یک یا چند افکت را روی عنصری که شفاف یا شفاف است اعمال می کند. برای درک آن، تصاویر زیر را در نظر بگیرید.
.frosty-glass-pane {
backdrop-filter: blur(2px);
}
.frosty-glass-pane {
opacity: .9;
backdrop-filter: blur(2px);
}
تصویر سمت چپ نشان می‌دهد که اگر backdrop-filter استفاده یا پشتیبانی نشود، چگونه عناصر همپوشانی ارائه می‌شوند. تصویر سمت راست با استفاده از backdrop-filter جلوه‌های تار را اعمال می‌کند. توجه داشته باشید که علاوه بر backdrop-filter از opacity استفاده می‌کند. بدون opacity ، چیزی برای اعمال تاری وجود نخواهد داشت. تقریباً ناگفته نماند که اگر opacity روی 1 تنظیم شود (کاملاً مات) تأثیری در پس‌زمینه نخواهد داشت.
ویژگی backdrop-filter مانند فیلترهای CSS است که تمام توابع فیلتر مورد علاقه شما پشتیبانی می شوند: blur() , brightness() , contrast() , opacity() , drop-shadow() و غیره. همچنین اگر می‌خواهید از یک تصویر خارجی به‌عنوان فیلتر و همچنین از کلیدواژه‌های none ، inherit ، initial و unset استفاده کنید، از تابع url() پشتیبانی می‌کند. توضیحاتی برای همه اینها در 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 کروم در نسخه 76، وب را یک قدم به ارائه رابط کاربری واقعاً شبیه به سیستم عامل نزدیک‌تر می‌کند.