מחולל Glassmorphism

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

הרקע הוא אנימציית CSS אמיתית: linear-gradient גדול הצבוע בגודל 400% מהאלמנט, עם @keyframes המזיזים את background-position קדימה ואחורה בלולאה — בלי לולאת אנימציית JavaScript, בלי canvas, פשוט אותה טכניקת background-position רציפה שמשתמשים בה בכותרות ראשיות באתרי אינטרנט. טשטוש, צבע הגוון ושקיפותו, צבע קו המתאר הבהיר, השקיפות והעובי שלו, עיגול הפינות ורכות הצל — כולם מניעים את הסגנונות החיים של הכרטיסית המרחפת, ותיבת ה-CSS להעתקה משקפת בדיוק את אותם ערכים.

לא כל דפדפן תומך ב-backdrop-filter, לכן המחולל פולט גם בלוק אמיתי של @supports not (backdrop-filter: blur(1px)) — לא מחווה סמלית, אלא כלל גיבוי עם צבע רקע משלו המחושב מתוך שקיפות הגוון האמיתית שלכם. מכיוון ששקיפות ללא טשטוש נראית גרועה יותר (מה שמאחוריה נראה בבירור, לא מטושטש), הגיבוי מעלה אוטומטית את ערוץ האלפא מעל שקיפות הגוון שבחרתם, והערה בקוד ה-CSS שנוצר מסבירה בדיוק למה ובכמה.

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