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