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

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

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

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

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