מה זה ניאומורפיזם? ואיך עושים את זה עם אלמנטור?

אז אם אתם מתעדכנים קצת בעולם העיצוב, בעיקר עיצוב אתרים ואפליקציות, קשה מאוד שלא להיתקל במילה המפחידה הזאת, ניאומורפיזם (neumorphism), חלק מהמומחים (או שלא) טוענים שזה הדבר הבא וחלק אומרים שעד 2021 כבר לא נזכור מה זה, מ"מ עד שנדע מי צדק, בוא נבין מה זה בכלל, והעיקר איך עושים את זה עם אלמנטור.

מה זה עיצוב ניאומורפיסטי
אז במקום לבזבז אלף מילים נראה ישר את התמונה.

%D7%90%D7%9C%D7%9E%D7%A0%D7%98%D7%95%D7%A8_%D7%94%D7%91%D7%99%D7%AA.png

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

טוב נראה לי הבנתם את הרעיון.

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

ועכשיו לאלמנטור
אז הנה אנחנו במסך העריכה של אלמנטור

%D7%90%D7%9C%D7%9E%D7%A0%D7%98%D7%95%D7%A8_%D7%94%D7%91%D7%99%D7%AA-1.png

לרקע נתתי אפור די בהיר, וגררתי ווידג'ט של כפתור, דבר ראשון זה לשנות את הצבע רקע של הכפתור לרקע שקוף, בשביל שיהיה באותו הצבע של הרקע הכללי, אח"כ נעשה לכפתור הצללה, ונזיז את ההצללה לכיוון אופקי ואנכי (במקרה הזה אנכי למטה ואופקי לצד ימין אבל כמובן אפשר גם לצד השני).

%D7%90%D7%9C%D7%9E%D7%A0%D7%98%D7%95%D7%A8_%D7%94%D7%91%D7%99%D7%AA-2.png

כעת נשכפל את הכפתור, נשנה את צבע ההצללה ללבן, ונשנה את המיקום למינוס 4 באופקי ובאנכי.

%D7%90%D7%9C%D7%9E%D7%A0%D7%98%D7%95%D7%A8_%D7%94%D7%91%D7%99%D7%AA-3.png

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

Reactions: משך, השקעות R הון, rachelita ועוד 31 משתמשים

תגובות

אהבתי את זה:

אנימציות פרלקס מורכבות עם אלמנטור

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

wpguide.co.il

ז
זאבי1
1/6/20

תודה רבה על המאמר המחכים

מעולה!! מחכים ומועיל מאד!

וואו מקסים! עולם ומלואו...

יפה מאוד,
אהבתי את הרעיון

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

איך עושים כשילחצו על כפתור זה יקבל אשליה הפוכה, של כפתור לחוץ?

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

נכתב ע"י ירמיה בן קמון:
איך עושים כשילחצו על כפתור זה יקבל אשליה הפוכה, של כפתור לחוץ?

יש את האתר המעולה הזה שמיצר את הקוד של ההצללה (צריך לדעת איך להחיל את הקוד הזה באלמנטור),
בשביל ההובר, פשוט לייצר את הקוד של הבולט והשקוע, ואז לעשות שהשקוע יהיה בהובר (ממש טיפה css)