יצירת רקעים בסגנון מערכת הפעלה באמצעות מסנן רקע

טשטוש והזזה של צבע מאחורי רכיב.

Adam Argyle

Joe Medley

שקיפות, טשטוש ואפקטים אחרים הם דרכים שימושיות ליצירת עומק, תוך שמירה על ההקשר של תוכן הרקע. הם תומכים במגוון תרחישים לדוגמה, כמו זכוכית מט, שכבות-על של סרטונים, כותרות שקופות של ניווט, צנזור של תמונות בלתי הולמות, טעינת תמונות ועוד. ייתכן שהאפקטים האלו יזוהו בשתי מערכות הפעלה פופולריות: Windows 10 ו-iOS.

דוגמה לאפקט של זכוכית חלבית. מקור.

בעבר, היה קשה להטמיע את הטכניקות האלה באינטרנט, והן דרשו פריצות או פתרונות זמניים לא מושלמים. בשנים האחרונות, גם Safari וגם Edge מספקים את היכולות האלה באמצעות המאפיין background-filter (או, לחלופין, המאפיין -webkit-backdrop-filter), שמערבב באופן דינמי בין צבעי החזית לרקע על סמך פונקציות סינון. Chrome תומך עכשיו ב-background-filter, החל מגרסה 76.

הדגמה של פונקציות המסנן עבור backdrop-filter. כדאי לנסות את הדוגמה ב-CodePen.

תמיכה בדפדפנים

תמיכה בדפדפנים

• 76
• 79
• 103
• 18

מקור

מסיבות של ביצועים, מומלץ לעבור לתמונה במקום ל-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 מחיל מסנן אחד או יותר על רכיב ומשנה את המראה של כל מה שנמצא מאחורי הרכיב.
• הרכיב השכבת-על חייב להיות שקוף חלקית לפחות.
• הרכיב שמופיע בשכבה העליונה יקבל הקשר חדש של סטאקינג.

זהירות: 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);
}

אפשר לנסות את הדוגמה הזו בעצמכם ב-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 בשנים האחרונות, וסימנו את זה בבירור כתכונה שחיכיתם לה כבר הרבה זמן. השקת backdrop-filter של Chrome בגרסה 76 מקרבת את האינטרנט צעד נוסף לעבר תצוגת ממשק משתמש דמוית מערכת הפעלה.

מקורות מידע נוספים

• מפרט
• סטטוס הפלטפורמה של Chrome
• MDN
• background-filter ב-CSS Tricks
• דוגמאות ב-Codepen