پس زمینه های سبک سیستم عامل را با فیلتر پس زمینه ایجاد کنید

محو شدن و تغییر رنگ در پشت یک عنصر.

Adam Argyle

Joe Medley

شفافیت، تاری، و سایر افکت‌ها راه‌های مفیدی برای ایجاد عمق در عین حفظ متن محتوای پس‌زمینه هستند. آنها از موارد استفاده زیادی مانند شیشه مات، پوشش های ویدئویی، هدرهای ناوبری شفاف، سانسور نامناسب تصویر، بارگذاری تصویر و غیره پشتیبانی می کنند. ممکن است این اثرات را از دو سیستم عامل محبوب تشخیص دهید: Windows 10 و iOS .

نمونه ای از افکت شیشه مات. منبع .

از لحاظ تاریخی، پیاده‌سازی این تکنیک‌ها در وب دشوار بود و به هک‌ها یا راه‌حل‌های کاملی نیاز نداشتند. در سال‌های اخیر، هم Safari و هم Edge این قابلیت‌ها را از طریق background-filter (و در عوض، ویژگی -webkit-backdrop-filter ) ارائه کرده‌اند، که به‌طور پویا رنگ‌های پیش‌زمینه و پس‌زمینه را بر اساس توابع فیلتر ترکیب می‌کند. اکنون Chrome از background-filter پشتیبانی می‌کند که از نسخه ۷۶ شروع می‌شود.

نمایشی از عملکردهای فیلتر برای backdrop-filter . مثال را در CodePen امتحان کنید.

پشتیبانی از مرورگر

پشتیبانی مرورگر

• 76
• 79
• 103
• 18

منبع

به دلایل عملکرد، زمانی که 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 ممکن است به عملکرد آسیب برساند. قبل از استقرار آن را تست کنید.

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);
}

این مثال را برای خودتان در CodePen امتحان کنید.

فیلترهای متعدد

گاهی اوقات برای رسیدن به اثر دلخواه به چندین فیلتر نیاز دارید. برای انجام این کار، لیستی از فیلترها را ارائه دهید که با فاصله از هم جدا شده اند. به عنوان مثال:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

در مثال زیر، هر یک از چهار پنجره دارای ترکیب متفاوتی از فیلترهای پس زمینه هستند در حالی که همان مجموعه اشکال در پشت آنها متحرک هستند.

این مثال را برای خودتان در CodePen امتحان کنید.

روکش ها

این مثال نشان می‌دهد که چگونه می‌توان یک پس‌زمینه نیمه شفاف را محو کرد تا متن را خوانا کند، در حالی که از نظر سبک با پس‌زمینه صفحه ترکیب می‌شود.

.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;
}

این مثال را از Chen Hui Jing در Codrops امتحان کنید.

نتیجه گیری

بیش از 560 نفر از شما در چند سال گذشته به باگ Chromium رای مثبت داده‌اید و به وضوح آن را به‌عنوان ویژگی مورد انتظار CSS مشخص کرده‌اید. انتشار backdrop-filter کروم در نسخه 76، وب را یک قدم به ارائه رابط کاربری واقعاً شبیه به سیستم عامل نزدیک‌تر می‌کند.

منابع اضافی

• مشخصات
• وضعیت پلتفرم Chrome
• MDN
• background-filter در ترفندهای CSS
• نمونه ها در Codepen