מחולל Glassmorphisc CSS

מחולל ה-CSS Glassmorphism הוא עורך חזותי לסגנון ממשק המשתמש של זכוכית חלבית, שבו משטח שקוף מטשטש את כל מה שיושב מאחוריו. אתה מכוון את טשטוש הרקע, ממלא שקיפות, רוויה, צבע גוון ורדיוס פינתי עם מחוונים, צופה בעדכון תצוגה מקדימה על רקע צבעוני ומעתיק את ה-CSS המדויק שהוא מייצר.

Glassmorphism מסתמך על תכונת ה-Backdrop-Filter, אשר מחיל טשטוש על התוכן שמאחורי אלמנט ולא על האלמנט עצמו. בשילוב עם רקע חצי שקוף, גבול קו שיער וצללית רכה, הוא מייצר את מראה הזכוכית השכבתית הפופולרית על ידי מערכות הפעלה מודרניות. השגת האיזון בצורה מסובכת היא מסובכת, כך שהכלי הזה מנהל כל ערך ומוציא בלוק נקי שניתן להעתקה.

הכל פועל בדפדפן שלך בחר הגדרה מראש כמו Frosted, Dark או Vibrant, כוונן את המחוונים והעתק את ה-CSS - כולל מסנן הרקע עם קידומת webkit לתמיכה רחבה יותר. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.

האפקט תלוי בשני מאפיינים שעובדים יחד, והוא נכשל בשקט אם אחד מהם חסר. מסנן רקע מטשטש את כל מה שיושב מאחורי האלמנט, ולכן הוא זקוק לצבע רקע שקוף בחלקו כדי להראות דרכו: באטימות מלאה אין מה לראות, וללא רקע כלל המשטח נעלם. זה גם צריך משהו מאחוריו ששווה לטשטש, וזו הסיבה שהאפקט נראה כמו פאנל שטוח על רקע רגיל ומתעורר לחיים על פני צילום. שתי עלויות מעשיות. טשטוש רקע הוא אחד הדברים היקרים יותר לחיבור, במיוחד על פני שטח גדול או במהלך גלילה. ולטקסט על משטח שקוף יש יחס ניגודיות שמשתנה עם כל מה שעובר מתחת, כך שהוא יכול לעבור בדיקת ניגודיות על רקע אחד ולהיכשל על רקע אחר.

כמחולל CSS של glassmorphism, הוא מתחיל מהקבוע מראש של Frosted, והגוש המועתק עבור אותו מוגדר מראש קורא: רקע: rgba (255, 255, 255, 0.2); מסנן רקע: טשטוש (10px) רווי (120%); אותו ערך שוב כמו -webkit-backdrop-filter; רדיוס גבול: 16px; גבול: 1px rgba מוצק (255, 255, 255, 0.18); וצל קופסה: 0 8px 32px rgba (0, 0, 0, 0.12). לחץ על כהה והרקע משתנה ל-rgba (15, 23, 42, 0.25) עם טשטוש של 12px, שהיא הגרסה לשימוש על פני תמונה קלה.