מחולל Glassmorphism

מה זה מחולל glassmorphism / neumorphism?

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

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

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

מה תלמדו תוך כדי משחק עם המשטחים האלה

• backdrop-filter הוא המאפיין שמפעיל את ה-glassmorphism: הוא מטשטש ומרווה את מה שנמצא *מאחורי* האלמנט, לא את האלמנט עצמו.
• זכוכית צריכה מילוי שקוף למחצה (rgba(...) עם alpha נמוך) ומסגרת בהירה ודקה כדי להיראות כמו חומר חלבי אמיתי. הסירו אחד מהם והאפקט קורס.
• Neumorphism משתמש ב**שתי** הצהרות box-shadow, לא באחת: צל כהה יותר בפינה הימנית התחתונה והדגשה בהירה יותר בפינה השמאלית העליונה, שניהם בגוון המשטח ולא בשחור או בלבן טהורים.
• Neumorphism *שקוע* פשוט מוסיף לצללים את מילת המפתח inset: אותם מספרים, כיוון ויזואלי הפוך (לחוץ פנימה ולא בולט החוצה).
• זכוכית צריכה רקע צבעוני כדי שיראו אותה. שימו אותה על לבן פשוט, ולטשטוש אין על מה לעבוד.

איך ליצור משטח זכוכית או neumorphism, צעד אחר צעד

1. 1

   בחרו את מצב הסגנון

   עברו בין **זכוכית** ל-**Neumorphism** למעלה. זכוכית צריכה רקע, ו-neumorphism יושב על צבע משטח אחיד שאתם שולטים בו.

2. 2

   כווננו את הפרמטרים העיקריים

   בזכוכית, המנופים הגדולים הם *טשטוש* (כמה חזק הרקע נמרח), *שקיפות הרקע* (כמה הכרטיס שקוף) ו*גוון* (נגיעת צבע עדינה). ב-neumorphism, המנופים הגדולים הם *מרחק* (כמה רחוק הצללים מוסטים), *טשטוש* (כמה הם רכים) ו*עוצמה* (כמה הצללים הבהיר והכהה שונים מהמשטח).

3. 3

   בחרו רקע או צבע משטח

   זכוכית נראית הכי טוב על גרדיאנט בולט או על צילום. Neumorphism נראה הכי טוב על צבע רך שאינו טהור לגמרי (#e0e5ec הוא "האפור הנאומורפי" הקנוני). הכלי מגיע עם שורה של תבניות מוכנות שאפשר ללחוץ עליהן.

4. 4

   החליפו את סגנון ה-neumorphism

   ל-Neumorphism יש שלוש גרסאות: **בולט** (יוצא החוצה), **שטוח** (אותם צללים, בלי מילוי גרדיאנט) ו-**שקוע** (לחוץ פנימה). נסו את שלושתן: הן חולקות את אותו חישוב צללים, ורק הכיוון משתנה.

5. 5

   העתיקו את ה-CSS

   לחצו על **העתקה** והדביקו את הקטע בגיליון הסגנונות. הפלט מוכן לפרודקשן: הוא כולל את -webkit-backdrop-filter עם הקידומת לגרסאות Safari ישנות, מאפיינים מסודרים ו-border-radius תואם, כך שהוא עובד כמחלקה אחת.

טבלת עזר לזכוכית ול-neumorphism

המאפיינים שכל אפקט באמת נשען עליהם. התיעוד המלא בעמודי MDN's backdrop-filter ו-box-shadow.

דוגמאות משטחים לנסות

background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow:  16px 16px 32px #b8bcc1,  -16px -16px 32px #ffffff;

background: #e0e5ec;border-radius: 24px;box-shadow:  inset 8px 8px 16px #b8bcc1,  inset -8px -8px 16px #ffffff;

טעויות נפוצות בזכוכית / neumorphism

• שכחה של -webkit-backdrop-filter. גרסאות Safari ישנות (וכל WebView מוטמע) מתעלמות מ-backdrop-filter בלי הקידומת, והזכוכית שלכם הופכת לבלוק אטום.
• שימוש בשחור ולבן טהורים לצללים נאומורפיים. neumorphism אמיתי משתמש בשני צבעים **קרובים** לגוון המשטח, וצללים בשחור/לבן גורמים לכרטיס להיראות זול.
• הנחת זכוכית על לבן פשוט. אין צבע מאחורי הטשטוש, אז האפקט נעלם ונשארת קופסה בגוון קלוש. זכוכית צריכה רקע עמוס.
• ערימה של יותר מדי שכבות backdrop-filter. כל אחת היא מעבר טשטוש בזמן אמת על ה-GPU: שלוש או ארבע באותו מסך, והדשבורד שלכם מתחיל לאבד פריימים.
• דילוג על בדיקות נגישות. טקסט על זכוכית נכשל לעיתים קרובות בניגודיות של WCAG כי הרקע מחלחל פנימה. תמיד שלבו כרטיס זכוכית עם צבע טקסט כהה יותר ממה שהייתם משתמשים בו על לבן אטום.

שאלות נפוצות על Glassmorphism Generator