מחולל 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.