מחולל Glassmorphism
צור כרטיסי ממשק בסגנון זכוכית חלבית עם טשטוש רקע, שקיפות ומסגרות, ואז העתק את ה-CSS.
כרטיס זכוכית
זכוכית חלבית מרחפת מעל רקע צבעוני.
-
מפיק גם backdrop-filter וגם -webkit-backdrop-filter. שים לב: backdrop-filter אינו נתמך בדפדפנים ישנים (למשל Firefox מתחת ל-103); הוסף עבורם רקע אטום כברירת מחדל.
אודות מחולל Glassmorphism
מחולל הגלאסמורפיזם בונה את אפקט כרטיס הזכוכית המכוסה כפור: לוח שקוף למחצה שמטשטש כל מה שנמצא מאחוריו. מחוונים שולטים בטשטוש וברוויה של backdrop-filter, בצבע הגוון של הזכוכית ובשקיפותו, בצבע ובאטימות הגבול, ברדיוס הפינות ובצל חיצוני: כל שינוי מוצג באופן חי מעל רקע עשיר כדי שתוכלו לשפוט את האפקט באופן מציאותי.
ארבע תבניות איכות (עדין, מכוסה כפור, עז וזכוכית כהה) מספקות שילובים מוכחים להתחלה. התבנית הכהה מדגימה כיצד אותה מתכונת מסתגלת לממשקים כהים, שם גבול בהיר עדין עושה את רוב העבודה של הפרדת הזכוכית מהרקע.
ה-CSS שנוצר כולל גם את backdrop-filter וגם את הקידומת -webkit-backdrop-filter הנדרשת ב-Safari. שימו לב להסתייגות התאימות: דפדפנים ישנים יותר (למשל Firefox לפני גרסה 103) אינם תומכים ב-backdrop-filter, לכן ספקו רקע חלופי אחיד עבורם.
כיצד להשתמש ב-מחולל Glassmorphism
- התחילו מתבנית (עדין, מכוסה כפור, עז או זכוכית כהה) או מברירות המחדל.
- כווננו את הטשטוש והרוויה של מסנן הרקע.
- קבעו את צבע הגוון של הזכוכית ואת שקיפותו.
- כווננו את צבע הגבול, אטימות הגבול, רדיוס הפינות וצל המתאר.
- העתיקו את ה-CSS: הוא כבר כולל את התכונה עם הקידומת -webkit- עבור Safari.