מחולל גלאסמורפיזם

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

הרקע הוא אנימציית CSS אמיתית: שיפוע ליניארי גדול צבוע ב-400% מגודל האלמנט, כאשר @keyframes מעביר את מיקום הרקע שלו קדימה ואחורה בלולאה - ללא לולאת אנימציה של JavaScript, ללא קנבס, רק אותה טכניקת מיקום רקע רציפה המשמשת בקטעי גיבורי ייצור. טשטוש, גוון ואטימות, צבע הדגשת גבול/אטימות/רוחב, רדיוס פינות ורכות צל - כולם מניעים את סגנונות החיים של הכרטיס הצף, ותיבת ה-CSS הניתנת להעתקה משקפת את אותם ערכים בדיוק.

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

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