ניומורפיזם CSS Shadow - קוד דו-שכבתי
בנה קוד תיבה-צל של CSS בצורה ויזואלית: מחוונים להיסט, טשטוש, פיזור, צבע עם אטימות, מצב הוספה ועד ארבע שכבות עם תצוגה מקדימה חיה.
תוצאה
עמוד זה פותח את המחולל עם הצמד הנוימורפי הקלאסי שכבר נבנה: היסט שכבה בהירה −8px/−8px בלבן כמעט ושכבה כהה היסט 8px/8px באפור-כחול מושתק, שניהם מטושטשים 16px. Switch between the two layers in the layer list to tune each side independently.
נוימורפיזם (ממשק משתמש רך) הוא הסגנון המוטבע שהגיע לשיא בסביבות 2020: אלמנטים נראים מוחלפים מהרקע במקום מרחפים מעליו. בכנות, זה מגיע עם פשרות אמיתיות - האפקט עובד רק כאשר הרקע של האלמנט תואם לרקע העמוד, והקצוות בעלי הניגודיות הנמוכה עלולים לפגוע בנגישות - כך שרוב הצוותים משתמשים בו כעת כמבטא, ולא כשפה עיצובית שלמה.
אם הסגנון מתאים לפרויקט שלך, ההצהרה הדו-שכבתית הזו היא נקודת ההתחלה הקנונית: העתק את ה-CSS, הגדר את האלמנט ואת הרקע של העמוד לאותו אפור רך והוסף רדיוס גבול תואם. הכל פועל באופן מקומי בדפדפן שלך.