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