טשטוש ושינויים בצבעים מאחורי אלמנט.
שקיפות, טשטוש ואפקטים אחרים הם דרכים שימושיות ליצירת עומק, תוך שמירה על ההקשר של תוכן הרקע. הן תומכות במגוון תרחישים לדוגמה, כמו זכוכית חלבית, שכבות-על של סרטונים, כותרות ניווט שקופות, צנזור תמונות בלתי הולמות, טעינת תמונות וכן הלאה. ייתכן שהאפקטים האלו יזוהו בשתי מערכות הפעלה פופולריות: Windows 10 ו-iOS.
![דוגמה לאפקט זכוכית חלבית.](https://web.dev/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=5&hl=he)
בעבר, היה קשה להטמיע את הטכניקות האלה באינטרנט, והשיטות האלה לא כללו פריצות או דרכים לעקוף את השיטות האלה בצורה פחות מושלמת. בשנים האחרונות, גם 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
מפעיל אפקט אחד או יותר על רכיב שקוף או שקוף. כדי להבין את זה, עיינו בתמונות שמופיעות בהמשך.
![משולש שמעל מעגל. לא ניתן לראות את העיגול דרך המשולש.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=5&hl=he)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![משולש שמעל מעגל. המשולש שקוף וניתן לראות את העיגול דרכו.](https://web.dev/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=5&hl=he)
.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 בשנים האחרונות, וסימנו את זה בבירור כתכונה שחיכיתם לה כבר הרבה זמן. השקת backdrop-filter
של Chrome בגרסה 76 מקרבת את האינטרנט צעד נוסף לעבר תצוגת ממשק משתמש דמוית מערכת הפעלה.