לוחות זכוכית חלביים נמצאים בכל מקום בעיצוב הממשק: סרגל הצד השקוף במערכת הפעלה שולחנית, הכותרת המטושטשת המאפשרת לתמונה להופיע, הכרטיס שצף מעל שיפוע בדף נחיתה המראה פשוט לתיאור וקל באופן מוזר לטעות ב-CSS. פאנל בסופו של דבר שטוח ואפור, או שהטשטוש לא עושה כלום, או שהטקסט הלבן עליו אינו קריא על פני חצי מהרקע.
מדריך זה מסביר את ה-CSS שגורם לאפקט לעבוד, מדוע כל אחד מחמשת המאפיינים קיים, כיצד לשמור על טקסט קריא כאשר הרקע ממשיך להשתנות, מה זה עולה בביצועי העיבוד וכיצד לחזור אחורה בחן. הדוגמאות המעובדות משתמשות בפלט של מחולל CSS של Toolz glassmorphism, שבונה את הקוד ממחוונים ותצוגה מקדימה חיה.
TL;DR: Glassmorphism הוא סגנון ממשק משתמש שבו פאנל נראה כמו זכוכית חלבית: רקע שקוף למחצה פלוס
backdrop-filter: blur()אז התוכן מאחוריו מופיע ברכות, בדרך כלל סיים עם גבול שקוף של 1px וצל רך. זה צריך שני דברים כדי להיות גלוי: מילוי שחלקו שקוף ומשהו צבעוני מאחורי הפאנל. ניגודיות הטקסט משתנה עם כל מה שעובר מתחת, אז בדוק אותו מול החלקים הבהירים והכהים ביותר של הרקע האמיתי מחולל זכוכית CSS כותב את הבלוק המלא, כולל ה-webkit-קידומת, צד לקוח, חינם, ללא הרשמה.
מהו זכוכיתמורפיזם ב-CSS?
Glassmorphism הוא סגנון ויזואלי המחקה זכוכית חלבית אלמנט מקבל צבע רקע עם אטימות נמוכה ומסנן רקע המטשטש את הפיקסלים מאחוריו, כך שצורות וצבעים מתחת נראים מרוככים דרך פני השטח גבול אור דק מרמז על קצה הזכוכית, וצל עדין מרים את הפאנל מהדף.
תכונת המפתח היא backdrop-filter, מוגדר ב-W3C מודול אפקטי סינון רמה 2. זה לוקח את אותן פונקציות סינון כמו filter (blur(), saturate(), brightness() והשאר) אלא מיישם אותם על האזור שמאחורי האלמנט ולא על האלמנט עצמו הבדל אחד זה מה שמאפשר את האפקט.
הנה הבלוק המלא שהגנרטור מייצר עבור ההגדרה המוגדרת מראש שלו:
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
שישה קווים, ולכל אחד יש עבודה.
מסנן לעומת מסנן רקע: מה ההבדל?
filter משנה את אופן הציור של האלמנט עצמו, כולל הטקסט והילדים שלו. backdrop-filter משנה את מה שמופיע דרך האלמנט מאחור, ומשאיר את האלמנט ' התוכן שלו חד.
| נכס | מה זה משפיע | תוצאה לדוגמה של טשטוש | שימוש אופייני |
|---|---|---|---|
filter: blur(10px) |
האלמנט וכל ילדיו | הכרטיס והטקסט שלו מטושטשים | אפקטי תמונה, מצבים מושבתים, מצייני מיקום טעינה |
backdrop-filter: blur(10px) |
מה שצויר מאחורי האלמנט | הקלף נשאר חד, הרקע שנראה דרכו מטושטש | לוחות זכוכית חלבית, כותרות מטושטשות, שכבות מודאליות |
אם תטשטש כרטיס עם filter ותוהה למה הכותרת לא קריא, השתמשת בתכונה הלא נכונה. ה מחולל מסנן CSS מכסה את filter צד של הזוג.
איך כל שורה של הזכוכית CSS עובד?
הרקע הוא הגוון, וערוץ האלפא שלו הוא המספר החשוב ביותר בבלוק. rgba(255, 255, 255, 0.2) לבן ב 20% אטימות באלפא של 1 הפאנל מוצק ושום דבר לא מופיע דרכו, כך שטשטוש הרקע אינו נראה באלפא של 0 אין משטח כלל רוב הזכוכית שמישה יושבת בין 0.1 ל 0.4.
במחולל זהו המחוון Transparency, והשם צריך הערה: המחוון מגדיר את האטימות של המילוי, כך שערך שקיפות גבוה יותר הופך את הפאנל למוצק יותר. שקיפות 20% כותבת אלפא של 0.2, ו-40% כותבת 0.4.
מסנן הרקע עושה את הציפוי. blur(10px) מגדיר את רדיוס הטשטוש המופעל על מה שיושב מאחור. saturate(120%) מגביר את הצבע של אותה רקע מטושטש ב-20%, מה שנוגד את המראה האפור והשטוף שטשטוש בתוספת גוון לבן נוטה לייצר. המחולל ' מחוון הטשטוש פועל בין 0 ל-40 פיקסלים ורוויה בין 100% ל-200%.
העותק המקדים קיים כי מהדורות ישנות יותר של Safari מבינות רק -webkit-backdrop-filter. כתיבת שתי השורות עם ערכים זהים לא עולה כלום ומכסה את הגרסאות הללו.
רדיוס הגבול מעגל את הפינות, 0 עד 50px בגנרטור הטשטוש הוא clipped לצורה המעוגלת.
הגבול הוא קו 1px של לבן ב 18% אטימות.זה תופס את העין כמו הדגשה על קצה הזכוכית והחשוב ביותר על רקע כהה יותר, שבו גבול הפאנל היה מתמוסס אחרת. the generator's תיבת סימון גבול מדליקה או מכבה אותו; הצבע והרוחב קבועים.
הצל 0 8px 32px rgba(0, 0, 0, 0.12) הוא צללית טיפה רחבה וקלושה שמפרידה בין הפאנל לדף אם אתה רוצה לכוון אותו, ה מדריך צללים מסביר קיזוז, טשטוש והתפשטות לעומק.
מה מייצרים הקביעות המוגדרות מראש של הגנרטור?
הקביעות המוגדרות מראש הן נקודות התחלה ולא עיצובים מוגמרים כל החמישה משתמשים ברדיוס של 16 פיקסלים, וכולם מלבד עדין כוללים את הגבול.
| מוגדר מראש | רקע | מסנן רקע | גבול | הכי טוב נגמר |
|---|---|---|---|---|
| מְקוּפָּא | rgba(255, 255, 255, 0.2) |
blur(10px) saturate(120%) |
על | שיפועים צבעוניים ותמונות |
| אור | rgba(255, 255, 255, 0.35) |
blur(6px) saturate(130%) |
על | תמונות עסוקות שבהן טקסט זקוק לתמיכה רבה יותר |
| אפל | rgba(15, 23, 42, 0.25) |
blur(12px) saturate(120%) |
על | תמונות אור, טקסט לבן |
| תוסס | rgba(139, 92, 246, 0.15) |
blur(16px) saturate(180%) |
על | קטעי גיבור אפלים או רוויים |
| עדין | rgba(255, 255, 255, 0.12) |
blur(4px) saturate(120%) |
כבוי | צ'יפס ותגים קטנים |
הגנרטור נטען עם Frosted נבחר לחץ על הגדרה מראש, התאם את המחוונים ואת צבע הגוון, ובלוק הקוד מתעדכן תוך כדי גרירה.
למה מסנן הרקע שלי לא עובד?
כאשר נראה שהטשטוש לא עושה דבר, אחד מאלה הוא כמעט תמיד הגורם.
- הרקע אטום. מוצק
background: #fffאו אלפא של 1 מסתיר את הרקע לחלוטין הנמיכו את האלפא. - אין שום דבר מאחורי זה לטשטש. מעל דף שטוח בצבע יחיד, צבע שטוח מטושטש נראה זהה לצבע השטוח. Glass needs a gradient, a photo or shapes behind it.The generator's preview intentually sits over a gradient with colored circles for this reason; the מדריך שיפוע CSS מהווה מקור טוב לרקע שמציג את האפקט היטב.
- הקידומת חסרה. גרסאות ספארי ישנות יותר מתעלמות מהמאפיין הלא מקודם.
- אב קדמון מגביל את מה שהמסנן יכול לראות. במפרט הנוכחי של אפקטי מסנן, כמה מאפיינים על אב קדמון, כגון משלו
filter, אopacityמתחת ל-1 או אחרbackdrop-filter, התחל שורש רקע חדש, והטשטוש רק דוגם תוכן בתוך השורש הזה. אם הזכוכית יושבת בתוך עטיפה עם אחד מאלה, הזז את האפקט או את המאפיין. - לפאנל אין גודל או שקוף לחלוטין בדרך אחרת. אלמנט בגובה אפס או
opacity: 0על הפאנל מסתיר את האפקט יחד עם הפאנל.
איך שומרים על טקסט קריא על לוח זכוכית?
זכוכית קריא לוקח יותר עבודה מכל חלק אחר של הסגנון, כי צבע הטקסט קבוע בעוד הרקע מתחת ללוח לא. ה WCAG 2.2 מינימום ניגודיות מבקש יחס של לפחות 4.5:1 לטקסט רגיל ו-3:1 לטקסט גדול בלוח שקוף היחס הזה תלוי במה שעומד מאחורי כל חלק בחלונית באותו רגע.
דוגמה מעובדת הופכת את זה לבטון יחס הניגודיות מחושב מהבהירות היחסית של שני הצבעים, (L1 + 0.05) / (L2 + 0.05). מרוכבים למילוי זכוכית על הרקע: כל ערוץ הופך לאלפא כפול המילוי פלוס (1 מינוס אלפא) כפול הרקע. Blur ממוצע פיקסלים שכנים אך משאיר אזור ' צבע ממוצע בערך היכן שהיה, כך שעל פני שטח גדול של צבע אחד המרוכב הוא הערכה הוגנת.
| למלא | צבע רקע | צבע מורכב | ניגוד לטקסט לבן |
|---|---|---|---|
| חלבי, לבן ב-0.2 | כחול #60A5FA |
אודות rgb(128, 183, 251) |
בערך 2.1:1 |
| חלבי, לבן ב-0.2 | צהוב #FBBF24 |
אודות rgb(252, 204, 80) |
בערך 1.5:1 |
אפל, rgba(15, 23, 42, 0.25) |
כחול #60A5FA |
אודות rgb(76, 130, 198) |
בערך 4.0:1 |
קח את השורה הראשונה. אדום הוא 0.2 x 255 + 0.8 x 96 = 127.8, ירוק הוא 0.2 x 255 + 0.8 x 165 = 183, כחול הוא 0.2 x 255 + 0.8 x 250 = 251. הצבע הזה ' הבהירות היחסית מסתדרת ליד 0.454, ולבן ' s הוא 1, כך שהיחס הוא 1.05 / 0.504, בערך 2.1:1. אותו פאנל על החלק הצהוב של הרקע יורד לכ-1.5:1. אף אחד מהם לא עובר לגוף טקסט, והקביעה הכהה מראש על כחול מגיעה לכ-4.0:1: מספיק לטקסט גדול, עדיין קצר מ-4.5:1 לטקסט קטן.
התיקונים המעשיים, לפי סדר האפקטיביות:
- הרם את המילוי אלפא. מעבר שקיפות מ-20% ל-40% מסתירה יותר מהרקע ומצמצמת את הטווח שהניגודיות נעה לרוחבו.
- הכהה את הגוון עבור טקסט בהיר, או להבהיר אותו עבור טקסט כהה זכוכית כהה עם טקסט לבן מחזיקה מעל הרבה יותר רקעים מאשר זכוכית לבנה עם טקסט לבן.
- תגביר את הטשטוש. הוא מחליק פרטים בעלי ניגודיות גבוהה, כך שקו לבן דק מאחורי אות לא חותך דרכו.
- הוסף צל טקסט כמוצא אחרון לכותרות. ה מחולל צל טקסט עושה אחד רך במהירות.
- מבחן בקיצוניות. בדוק ניגודיות על האזורים הבהירים והכהים ביותר שהפאנל יכול לשבת עליהם, עם בודק ניגודיות צבעים, לא במקום נוח אחד.
הגנרטור's מועתק CSS מכסה את משטח הזכוכית בלבד הטקסט הלבן בתצוגה המקדימה שלו אינו חלק מהפלט, ולכן מוגדר color על האלמנט שלך בעצמך.
האם רקע-מסנן לפגוע בביצועים?
זה יכול. טשטוש רקע מאלץ את הדפדפן לקרוא בחזרה את הפיקסלים מאחורי האלמנט ולהפעיל עליהם טשטוש בכל פעם שהאזור הזה משתנה. בכרטיס סטטי זול. על שטח גדול, במהלך גלילה, או כאשר תוכן מחייה מאחורי הפאנל, זהו אחד האפקטים היקרים יותר ל-composite, וטלפונים בעלי עוצמה נמוכה יותר מציגים אותו תחילה כפריימים שנפלו.
הנחיות ששומרות עליו בשליטה:
- שמור על לוחות זכוכית צנועים בגודלם. שכבת-על חלבית עם נוף מלא עולה הרבה יותר מכרטיס.
- העדיפו רדיוסי טשטוש קטנים יותר העלות גדלה עם הרדיוס, ומעבר לכ-20 פיקסלים ההבדל החזותי קטן.
- הימנע מחייה של ערך הטשטוש עצמו. לְהַנִיחַ
opacityאוtransformשל הפאנל במקום. - היזהר עם כותרות דביקות על תוכן גלילה ארוך, אשר מטשטשים מחדש על כל מסגרת גלילה בדוק בטלפון אמיתי לטווח בינוני.
כיצד מוסיפים נפילה לדפדפנים או למשתמשים הזקוקים לכך?
גרסאות נוכחיות של Chrome, Edge, Firefox ו-Safari תומכות כולן backdrop-filter. דפדפנים ישנים מאוד מתעלמים ממנו ומציגים את המילוי השקוף למחצה ללא הטשטוש, אשר באלפא נמוך יכול להשאיר טקסט על רקע עמוס. שתי תוספות קטנות גורמות להשפעה להתדרדר היטב. אתה יכול לבדוק את טבלת התמיכה הנוכחית MDN's דף סינון רקע.
.glass {
/* Fallback: a more solid fill for browsers without backdrop-filter */
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
}
@media (prefers-reduced-transparency: reduce) {
.glass {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
ה @supports בלוק מחיל רק את הגרסה השקופה כאשר הטשטוש קיים. ה prefers-reduced-transparency תכונת מדיה, מוגדרת ב שאילתות מדיה רמה 5, מאפשר למשתמשים שביקשו ממערכת ההפעלה שלהם פחות שקיפות לקבל פאנל מוצק. תמיכת הדפדפן בתכונת מדיה זו עדיין חלקית, אז התייחסו אליו כאל שיפור היכן שזמין ולא כאמצעי ההגנה היחיד.
גלאסמורפיזם לעומת ניומורפיזם לעומת עיצוב שטוח
Glassmorphism הוא אחד מכמה סגנונות פני השטח, ולכל אחד מהם עלות שונה.
| סגנון | איך המשטח עשוי | ראשי CSS | כוח | סיכון עיקרי |
|---|---|---|---|---|
| גלאסמורפיזם | מילוי שקוף בתוספת טשטוש רקע | background עם אלפא, backdrop-filter |
עומק והקשר מהרקע | ניגודיות משתנה, טשטוש עלויות ביצועים |
| ניומורפיזם | אותו צבע כמו הדף, מורם או נלחץ על ידי צללים זוגיים | שתיים box-shadow שכבות |
בקרות רכות ומישוש | ניגודיות נמוכה מאוד בין שליטה לדף |
| שטוח | מילוי מוצק, ללא עומק | background |
מהיר וצפוי | יכול להרגיש פשוט |
| גובה בסגנון חומר | מילוי מוצק עם רמות עומק צל | box-shadow |
היררכיה ברורה | פחות אטמוספרי |
אם המראה הרך, שחול, קרוב יותר למה שאתה רוצה, ה מחולל ניומורפיזם בונה את הצללים המזווגים ממשקים רבים מערבבים סגנונות: זכוכית לסרגל ניווט צף מעל תמונת גיבור, כרטיסים שטוחים לתוכן צפוף מתחתיו.
איך לבנות כרטיס זכוכית, להתחיל לסיים
- פתח את מחולל CSS זכוכית חלבית ובחר את ההגדרה מראש הקרובה ביותר לרקע שלך: כהה לתמונות אור, חלבי או בהיר לשיפועים צבעוניים.
- הגדר את Blur גבוה מספיק כדי שפרטי הרקע לא יתחרו בטקסט, בדרך כלל 8 עד 16 פיקסלים.
- הגדר שקיפות. התחל ב-20% והעלה אותו עד שהטקסט שלך יעבור ניגודיות על החלק הקשה ביותר של הרקע.
- בחר גוון עם בוחר הצבעים. גוון שנלקח מהרקע ' הפלטה של עצמו נראית טבעית יותר מלבן טהור.
- התאם את Radius כך שיתאים לשאר הרכיבים שלך, ושמור על Border על רקע כהה.
- לחץ על העתק CSS והדבק את הבלוק על מחלקת הכרטיס שלך. הוסף
colorוריפוד עצמך. - עטוף את הבלוק ב
@supportsfallback למעלה אם אתה תומך בדפדפנים ישנים יותר.
הכל במחולל פועל בדפדפן שלך, כך ששום דבר לא מועלה והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף. עבור כלי משטח ואפקטים קשורים, ה רכזת כלי CSS מפרט שיפועים, צללים, מסננים ומעברים במקום אחד.
