ניומורפיזם הוא המראה שבו נראה כי כפתור או כרטיס נלחצים מהדף עצמו, כמו צורה יצוקה מפלסטיק רך אין גבול, אין צבע מילוי השונה מהרקע, רק הדגשה חיוורת מצד אחד וצל רך מצד שני הוא מצלם יפה בדגמי עיצוב בממשק אמיתי קל לטעות בשתי דרכים: האפקט נעלם, או הפקדים הופכים קשים לראות.
שתי הבעיות מסתכמות בכמות קטנה של חשבון לגבי צבעים וצללים מדריך זה מסביר כיצד אפקט ממשק המשתמש הרך בנוי משניים box-shadow שכבות, כיצד הגוונים הבהירים והכהים נגזרים מצבע משטח אחד, מה הצורות השטוחות, הקעורות, הקמורות והלחוצות משתנות, וכיצד לשמור על ממשק ניומורפי שמיש תחת כללי הניגודיות של WCAG. ה מחולל נוימורפיזם CSS מייצר את כל הקוד למטה עם תצוגה מקדימה חיה.
TL;DR: לאלמנט ניאומורפי יש את אותו צבע רקע כמו הדף ושני צללי קופסה: אחד כהה יותר מאופסט למטה וימין, ואחד בהיר יותר מאופסט למעלה ושמאל. שימוש במילת המפתח המוכנסת בשניהם גורם לאלמנט להיראות לחוץ. מחולל הנוימורפיזם CSS שואב את שני צבעי הצל מצבע פני השטח שלך, עם מחוונים למרחק (2 עד 50 פיקסלים), טשטוש (0 עד 100 פיקסלים), עוצמה (2 עד 40%) ורדיוס (0 עד 80 פיקסלים), בתוספת שטוח, צורות קעורות, קמורות ולחוץ. משטח האור המוגדר כברירת מחדל נותן
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff. הצללים האלה מגיעים רק לניגודיות של כ-1.5:1 מול פני השטח, הרבה מתחת ל-3:1 ש-WCAG מבקש על גבולות הבקרה, כך שאלמנטים אינטראקטיביים צריכים גבול גלוי או מצב מיקוד. זה בצד הלקוח, בחינם, ללא הרשמה.
מהו נוימורפיזם בעיצוב ממשק משתמש?
ניומורפיזם, הנקרא גם ממשק משתמש רך, הוא סגנון ויזואלי שבו רכיבי ממשק מופיעים שחולצו או נלחצים אל הרקע שלהם באמצעות צללים בהירים וכהים זוגיים במקום גבולות או מילוי מנוגדים השם משלב "new" ו-"skeuomorphism", הסגנון הישן יותר שחקה חומרים פיזיים. Neumorphism מחקה חומר אחד, משטח רציף יחיד, ומסתמך על מקור אור מדומיין בפינה השמאלית העליונה.
הסגנון הפך פופולרי באתרי ראווה עיצוביים בסביבות 2020. הוא מתאים היטב לפאנלים דקורטיביים, לוחות מחוונים הנצפים על מסכים טובים וגרפיקת גיבורים חד פעמית. זה לא מתאים לצורות צפופות, לכל דבר בשימוש בחוץ ולכל שליטה שמשתמש חייב למצוא במהירות, מסיבות המכוסות בסעיף הנגישות.
כיצד פועל האפקט הנוימורפי ב-CSS?
האפקט צריך שלושה דברים: צבע רקע על האלמנט התואם לדף, רדיוס גבול ושני צללים המוטלים בכיוונים מנוגדים.CSS box-shadow מאפיין מקבל רשימה מופרדת בפסיקים של צללים, כל אחד עם היסט x, היסט y, רדיוס טשטוש וצבע, כפי שמתועד ב MDN's הפניה לקופסה-צל וצוין ב רקעים וגבולות CSS רמה 3.
הנה הפלט של הגנרטור 's ברירת המחדל של Light preset:
border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;
קרא את רשימת הצללים משמאל לימין הצל הראשון מוסט 12 פיקסלים ימינה ו-12 למטה, מטושטש מעל 24 פיקסלים, באפור כהה יותר מהמשטח: כלומר הגוון בצד הרחק מהאור השני מוסט 12 פיקסלים שמאלה ו-12 למעלה בצבע בהיר יותר מהמשטח: ההדגשה בצד הפונה לאור. כי האלמנט ' הרקע שלו זהה #e0e0e0 בתור הדף, אין קצה גלוי הצורה קיימת רק כגבול שבו שני הצללים נפגשים.
מדוע אפקט הנוימורפיזם שלי לא מופיע?
הסיבה השכיחה ביותר היא חוסר התאמה בין האלמנט's רקע וכל מה שעומד מאחוריו. אם הדף לבן והכרטיס כן #e0e0e0, אתה רואה כרטיס אפור עם צל, לא שחול רך הגדר את רקע האב & #39;s לאותו צבע כמו האלמנט. לוח התצוגה המקדימה של generator & #39;s עושה זאת באופן אוטומטי, וזו הסיבה שהוא נראה שם ושגוי כאשר הוא מודבק על דף לבן.
הסיבה השנייה היא צבע הדגשה שלא ניתן לראות על משטח בהיר מאוד את "light" צל עשוי כבר להיות לבן טהור, ועל דף לבן טהור צל לבן הוא בלתי נראה. לכן גם ניומורפיזם כמעט אף פעם לא נעשה על #ffffff.
כיצד מחושבים צבעי הצל הבהיר והכהה?
הגנרטור מעביר כל תעלה אדומה, ירוקה וכחולה של צבע פני השטח באותה כמות: אחוז העוצמה של 255 הגוון הבהיר מוסיף את הכמות הזו והגוון הכהה מפחית אותה, וכל תעלה מהודקת לטווח 0 עד 255 ומעוגלת.
הנה החישוב עבור ברירת המחדל של Light preset, משטח #e0e0e0 (224, 224, 224) בעוצמה של 15%:
- כמות משמרת: 15% מ-255 = 38.25.
- גוון כהה: 224 - 38.25 = 185.75, מעוגל ל-186, שהוא משושה
ba. תוצאה:#bababa. - גוון בהיר: 224 + 38.25 = 262.25, מהודק ל-255, משושה
ff. תוצאה:#ffffff.
שלב 3 מראה גבול ששווה לדעת. On #e0e0e0 גולת הכותרת פוגעת בלבן טהור ברגע שהעוצמה חולפת (255 - 224) / 255 = 12.2%. כל עוצמה מעל שהופכת את הצל לכהה יותר מבלי להפוך את ההדגשה לבהירה יותר, כך שהאפקט הופך הפוך. על משטחים בהירים, שמור על עוצמה ליד נקודת ההידוק הזו, או בחר משטח מעט כהה יותר כך שלדגשה יהיה מקום.
אותו כלל נותן את הקביעות המוגדרות מראש האחרות:
| מוגדר מראש | משטח | מרחק / טשטוש | אינטנסיביות | גוון כהה | גוון בהיר |
|---|---|---|---|---|---|
| אור | #e0e0e0 |
12 / 24 פיקסלים | 15% | #bababa |
#ffffff |
| כרטיס | #f0f0f3 |
10 / 20 פיקסלים | 12% | #d1d1d4 |
#ffffff |
| אפל | #2d2f34 |
12 / 24 פיקסלים | 12% | #0e1015 |
#4c4e53 |
| לחוץ | #e0e0e0 |
12 / 24 פיקסלים | 15% | #bababa |
#ffffff |
| קמור | #e0e0e0 |
12 / 24 פיקסלים | 15% | #bababa |
#ffffff |
בהגדרה מראש של Dark, הפחתת 30.6 מכל ערוץ של (45, 47, 52) נותן (14, 16, 21), או #0e1015, והוספתו נותנת (76, 78, 83), או #4c4e53. מכיוון שההזזה שווה על פני הערוצים, הגוון הכחול הקל של פני השטח נישא לשני הגוונים, כך שכרטיס ניומורפי כהה אינו הופך לאפור ניטרלי שטוח.
מה משתנות ארבע הצורות?
Shape שולט באלמנט's מילוי רקע והאם הצללים יושבים מחוצה לו או בתוכו. מרחק, טשטוש ורדיוס מתנהגים אותו הדבר עבור כל הארבעה.
| צורה | רקע | צללים | נראה כמו |
|---|---|---|---|
| שטוח | צבע משטח אחיד | חיצוני | רמה מוגבהת |
| קמור | linear-gradient(145deg, light, dark) |
חיצוני | כיפה מוגבהת, מוארת משמאל למעלה |
| קָעוּר | linear-gradient(145deg, dark, light) |
חיצוני | צלחת מוגבהת מתעקלת פנימה |
| לחוץ | צבע משטח אחיד | שניהם inset |
חלול שנדחף לתוך הדף |
ההגדרה מראש לחוץ מייצרת:
border-radius: 24px;
background: #e0e0e0;
box-shadow: inset 12px 12px 24px #bababa, inset -12px -12px 24px #ffffff;
עם inset, הצללים מצוירים בתוך האלמנט's קופסת ריפוד, כך שהגוון הכהה מופיע לאורך הקצה הפנימי השמאלי העליון וההדגשה לאורך הימני התחתון. זה הופך את רמז התאורה ונקרא כשקע. זה הטבעי "active" או "on" מצב עבור מתג שמצב המנוחה שלו שטוח.
ההגדרה הקבועה מראש משתמשת בגוונים הבהירים והכהים המלאים כאשר שיפוע נעצר, linear-gradient(145deg, #ffffff, #bababa), שהיא עקומה חזקה למדי בעוצמה של 15%. עבור כיפה עדינה יותר, הורד את העוצמה; שמרכך את השיפוע ואת הצללים יחד, מכיוון ששניהם מגיעים מאותם שני צבעים.
כיצד המרחק, הטשטוש והרדיוס מתקשרים?
המחוונים עצמאיים, אבל המראה תלוי ביחסים שלהם.
- מרחק (2 עד 50 פיקסלים) קובע כמה רחוק כל צל מוסט בשני הצירים. הוא שולט בגובה הנראה: מרחקים גדולים יותר גורמים לאלמנט לצוף גבוה יותר מעל הדף.
- לְטַשׁטֵשׁ (0 עד 100 פיקסלים) קובע עד כמה קצוות הצל רכים טשטוש סביב מרחק כפול, כמו בכל הגדרה מראש, נותן את המראה הכרית האופייני טשטוש שווה או מתחת למרחק מייצר צללים עם קצוות קשים שנראים יותר כמו גזרה.
- רדיוס (0 עד 80 פיקסלים) מעגל את הפינות ממשק משתמש רך כמעט תמיד משתמש בעיגול נדיב; פינות מרובעות עם צללים רכים נראות כמו שגיאת עיבוד.
- אינטנסיביות (2 עד 40%) קובע כמה רחוק הגוונים נעים מצבע פני השטח.
יחס התחלה מעשי הוא טשטוש = 2 x מרחק, רדיוס = 2 x מרחק, עוצמה ליד נקודת ההידוק עבור פני השטח שלך. עבור אלמנטים קטנים כגון כפתור סמל של 40 פיקסלים, קנה מידה של מרחק עד 4 עד 6 פיקסלים; היסט של 12 פיקסלים על כפתור של 40 פיקסלים הופך את הצל לגדול יותר מהבקרה.
האם הנוימורפיזם נגיש?
לא כברירת מחדל. בקרה ניאומורפית' קצה s מוגדר על ידי צללים השונים מהמשטח באחוזים בודדים בלבד בבהירות, וזה נכשל בדרישת WCAG עבור הגבול הגלוי של רכיבים אינטראקטיביים.
WCAG 2.2 קריטריון הצלחה 1.4.11, ניגודיות ללא טקסט, דורש שהמידע החזותי הדרוש לזיהוי רכיב ממשק משתמש, ומצביו, יהיו בעלי יחס ניגודיות של לפחות 3:1 מול צבעים סמוכים יחס הניגודיות משתמש בנוסחת הבהירות היחסית המוגדרת ב WCAG 2.2. עבודה על זה עבור ברירת המחדל המוגדרת מראש:
| זוג | בהירות יחסית | יחס ניגודיות | נפגש 3:1? |
|---|---|---|---|
גוון כהה #bababa משטח vs #e0e0e0 |
0.491 לעומת 0.745 | בערך 1.47:1 | לא |
גוון בהיר #ffffff משטח vs #e0e0e0 |
1,000 לעומת 0.745 | בערך 1.32:1 | לא |
גבול #7f7f7f משטח vs #e0e0e0 |
0.212 לעומת 0.745 | בערך 3.03:1 | פשוט |
גבול #767676 משטח vs #e0e0e0 |
0.181 לעומת 0.745 | בערך 3.44:1 | כן, עם שוליים |
טקסט #333333 משטח vs #e0e0e0 |
0.033 לעומת 0.745 | בערך 9.6:1 | כן (עובר גם 4.5:1 לטקסט) |
ודמויות הצל האלה הן המקרה הטוב ביותר הטשטוש מפיץ את צבע הצל החוצה, כך שרוב הצל הנראה בהיר יותר מ #bababa. עוצמת העלאה לא עוזרת הרבה על משטח קל, כי גולת הכותרת כבר מהודקת בלבן.
כדי לבדוק את הצבעים שלך, ה בודק ניגודיות צבעים מחשב את היחס עבור כל זוג, ואת מדריך לבדיקת ניגודיות צבעים מסביר את הנוסחה בפירוט.
איך לשמור על המראה ולהעביר את כללי הניגודיות
אתה לא צריך לנטוש את הסגנון אתה צריך להפסיק להסתמך עליו לכל דבר שמשתמש חייב לתפוס.
- השתמש בממשק משתמש רך עבור מיכלים, לא עבור פקדים. כרטיסים, לוחות ובארות דקורטיביות יכולים להיות ניאומורפיים בלבד קריטריון 1.4.11 עוסק ברכיבים אינטראקטיביים וגרפיקה משמעותית, כך שמיכל שתוכנו מזהה את עצמו טומן בחובו הרבה פחות סיכון מאשר כפתור שהקצה שלו הוא הסימן היחיד שהוא קיים.
- תן לכל אלמנט אינטראקטיבי רמז אמיתי. גבול של 1 או 2 פיקסלים בצבע של 3:1 או יותר, סמל מנוגד או תווית טקסט.
- הפוך את המיקוד לברור. הוסף א
:focus-visibleמתאר בצבע ניגודיות גבוהה צללים רכים אינם מחוון מיקוד. - אל תסמן מצב עם עומק בלבד. אם לחוץ פירושו "on", שנה גם סמל, תווית או צבע.
- כבד את הגדרות המשתמש. ה שאילתת מדיה עם ניגודיות מעדיפה מאפשר לך להוסיף גבולות או לבטל את האפקט כאשר משתמש מבקש יותר ניגודיות.
.neu-button {
border-radius: 16px;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bababa, -8px -8px 16px #ffffff;
border: 2px solid #767676;
color: #333333;
}
.neu-button:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 3px;
}
.neu-button[aria-pressed="true"] {
box-shadow: inset 8px 8px 16px #bababa, inset -8px -8px 16px #ffffff;
}
@media (prefers-contrast: more) {
.neu-button { box-shadow: none; border-color: #333333; }
}
כיצד ליצור ניומורפיזם CSS, צעד אחר צעד
- פתח את מחולל ניומורפיזם ובחר הגדרה מראש כנקודת התחלה: אור, קלף, כהה, לחוץ או קמור.
- הגדר את צבע פני השטח עם בוחר הצבעים כך שיתאים לרקע שעליו יישב האלמנט שלך.
- התאם מרחק וטשטוש לגובה ורכות, ולאחר מכן עוצמה לניגודיות, צפייה בתצוגה המקדימה החיה.
- בחר צורה: שטוחה, קעורה, קמורה או לחוצה.
- הגדר את הרדיוס כך שיתאים לגודל האלמנט.
- לחץ על העתק CSS והדבק את שלוש ההצהרות לכלל שלך. זכור לתת להורה את אותו צבע רקע.
איך תומכים בנושאים בהירים וחשוכים?
צור קבוצה אחת של ערכים עבור כל ערכת נושא והחלף אותם במאפיינים מותאמים אישית. הקביעות המוגדרות מראש של Light and Dark למעלה נותנות זוג עובד:
:root {
--neu-surface: #e0e0e0;
--neu-dark: #bababa;
--neu-light: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--neu-surface: #2d2f34;
--neu-dark: #0e1015;
--neu-light: #4c4e53;
}
}
body, .neu-card { background: var(--neu-surface); }
.neu-card {
border-radius: 24px;
box-shadow: 12px 12px 24px var(--neu-dark), -12px -12px 24px var(--neu-light);
}
לנוימורפיזם כהה יש את המראה של בעיית פני האור: הצל נצמד לכיוון שחור, והדגשה נושאת את האפקט. בדוק ניגודיות בנפרד עבור כל נושא.
בהשוואה בין נוימורפיזם, זכוכית וצללים פשוטים
ממשק משתמש רך הוא אחת מכמה דרכים להראות עומק, ולכל אחת יש עלויות שונות.
| סגנון | Css ליבה | רמז עומק | סיכון ניגודיות | טוב ל |
|---|---|---|---|---|
| ניומורפיזם | שניים מתנגדים box-shadow שכבות, רקע תואם |
שחול מהדף | גבוה | לוחות דקורטיביים, לוחות מחוונים לראווה |
| גלאסמורפיזם | backdrop-filter: blur() ומילוי שקוף |
שכבה חלבית מעל התוכן | בינוני, תלוי מה יש מאחור | שכבות, קלפים על דימויים |
| גובה בסגנון חומר | אחד או שניים כלפי מטה box-shadow שכבות |
כרטיס צף מעל הדף | נמוך | ממשקים כלליים |
| שטוח עם גבולות | border וממלאים צבעים |
אף אחד | הכי נמוך | טפסים, נתונים צפופים, נגישות-עבודה ראשונה |
ה מחולל זכוכיתמורפיזם בונה את סגנון הזכוכית החלבית, ואת מדריך מחולל צללים תיבת מכסה צללי גובה בודדים ושכבתיים. לטקסט זוהר או מובלט ולא לקופסאות, ה מחולל צל טקסט מיישם רעיון דומה לסוג. כולם רשומים ב- רכזת כלי CSS.
הגנרטור פרטי?
כן התצוגה המקדימה וה-CSS נוצרים בדפדפן שלך עם JavaScript, שום דבר לא מועלה או מאוחסן, והדף ממשיך לעבוד במצב לא מקוון לאחר הטעינה. העתקת ספירת ה-CSS לעבר מגבלת שימוש יומית, והודעה מופיעה אם הגבלה זו הושגה.
