מהו מחולל הנוימורפיזם של CSS?
מחולל ה-CSS Neumorphism בונה אלמנטים רכים של UI - הסגנון שבו צורה נראית שחולצה בעדינות מהרקע או נלחצת אליו באמצעות צללים בהירים וכהים מזווגים. אתה מגדיר את צבע פני השטח, מרחק הצל, טשטוש, עוצמת הניגודיות, רדיוס הפינה והצורה, צופה בתצוגה מקדימה חיה ומעתיק את ה-CSS המדויק.
נוימורפיזם פועל על ידי הצבת שתי צללים על אלמנט שחולק את הרקע שלו עם העמוד: צל בהיר יותר בצד שמאל למעלה וכהה יותר מימין למטה. לגרום לשני צבעי הצל והקיזוז להיראות רכים בצורה משכנעת זה קפדני ביד. כלי זה מפיק את הגוונים הבהירים והכהים מצבע פני השטח שלך באופן אוטומטי, כך שהאפקט תמיד נראה מאוזן.
הכל פועל בדפדפן שלך. בחר הגדרה מראש, כוונן את המחוונים, החלף בין צורות שטוחות, קעורות, קמורות וצורות, והעתק את ה-CSS. אין חשבון, אין העלאות, והוא ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף.
כדאי להשתמש בניאומורפיזם בעיניים צלולות לגבי החולשה העיקרית שלו, שהיא נגישות הסגנון עובד על ידי הצבת צל בהיר וצל כהה על משטח כמעט באותו צבע כמו הרקע שלו, כך שקצה הפקד מוגדר על ידי הבדל של כמה אחוזים בבהירות זה נקרא אלגנטי לחלק מהצופים וכבלתי נראה לכל מי שיש לו רגישות ניגודיות מופחתת, על מסך עמום או בחוץ זה נכשל WCAG 1.4.11, המבקש יחס של 3:1 על הגבול של רכיב אינטראקטיבי הפשרה הרגילה היא לשמור על הסגנון למשטחים דקורטיביים ולתת לאלמנטים אינטראקטיביים באמת גבול אמיתי או מצב מיקוד ברור צבעי הצל נגזרים מצבע פני השטח כאן, כך שמשטח כהה מייצר זוג הפוך נכון ולא אפור.
כיצד להשתמש במחולל הנוימורפיזם CSS?
הגדר את צבע פני השטח
בחר את הצבע של האלמנט שלך, שאמור להתאים לרקע העמוד שמאחוריו - ניומורפיזם מסתמך על האלמנט והדף שחולקים את אותו צבע בסיס.
כוונן את הצללים
התאם את המרחק, הטשטוש והעוצמה כדי לשלוט עד כמה האלמנט מתרומם מהדף וכמה חזק הניגודיות האור/כהה.
בחר צורה
עבור בין שטוח, קעור, קמור ולחץ. לחיצה משתמשת בצלליות מוכנסות כדי להיראות שקועות, בעוד קעור וקמור מוסיפים שיפוע עדין.
העתק את ה-CSS
העתק את הבלוק שנוצר - רדיוס גבול, רקע וצל הקופסה המזווג - והדבק אותו על הכרטיס, הכפתור או הפאנל שלך.
תכונות מפתח
צבעי צל אוטומטיים
גווני הצל הבהירים והכהים נגזרים מצבע המשטח שלך, כך שאפקט ה-Ui הרך תמיד נראה מאוזן ללא התאמה ידנית
ארבע צורות
כיסוי שטוח, קעור, קמור ודחוס מראה מוגבה ושקוע, עם לחיצה באמצעות צללים משובצים וקעור/קמור המוסיף שיפוע עדין
שליטה מלאה
מחוונים למרחק צל, טשטוש, עוצמת ניגודיות ורדיוס פינתי מאפשרים לך לחייג את האפקט מ-Barly-There ל-Dramitain
תצוגה מקדימה חיה
התצוגה המקדימה יושבת על רקע תואם כך שהצללים הרכים נקראים כהלכה, מתעדכנים באופן מיידי תוך כדי עריכה
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
Credit Card Validator
Check a credit card number against the Luhn checksum and detect its card network. Validates the format only, never contacts a bank.
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!