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

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

1. כרטיסים נוימורפיים

השתמש בקטעי קוד ה- HTML וה- CSS הבאים ליצירת הכרטיסים הנוירופוריים שלעיל.

קוד HTML

לְעַצֵב

Lorem ipsum dolor sit amet consectetur elitisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

קרא עוד
















קוד

Lorem ipsum dolor sit amet consectetur elitisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

קרא עוד
















לְהַשִׁיק

Lorem ipsum dolor sit amet consectetur elitisicing elit. Quisquam laboriosam omnis dolore amet sequi nobis provident nisi esse optio recusandae quod.

קרא עוד

קוד CSS

כתובת url @ (' https://fonts.googleapis.com/css? משפחה = פופינים: 400,500,600,700,800,900 & display = swap ');
*
{
שוליים: 0;
ריפוד: 0;
גודל תיבה: גבול-תיבה;
משפחת גופנים: 'Poppins', sans-serif;
}
גוּף
{
תצוגה: flex;
justify-content: center;
פריטי יישור: מרכז;
גובה דקה: 100 וואט;
רקע: # ebf5fc;
}
.מְכוֹלָה
{
מיקום: קרוב משפחה;
תצוגה: flex;
הצדק-תוכן: מרחב סביב;
פריטי יישור: מרכז;
לכופף לכופף: לעטוף;
רוחב: 1100 פיקסלים;
}
.container. כרטיס
{
רוחב: 320 פיקסלים;
שוליים: 20 פיקסלים;
ריפוד: 40 פיקסלים 30 פיקסלים;
רקע: # ebf5fc;
גבול רדיוס: 40 פיקסלים;
תיבת צל: -6px -6px 20px rgba (255,255,255,1), 6px 6px 20px rgba (0,0,0,0.1);
}
.container .card: רחף
{
תיבת צל: שיבוץ -6 פיקס -6 פיקס 20 פיקסלים רגבה (255,255,255,0.5), הבלעת 6 פיקסלים 6 פיקסלים 20 פיקסלים רגבה (0,0,0,0.05);
}
.container .card .imgBx
{
מיקום: קרוב משפחה;
יישור טקסט: מרכז;
}
.container .card .imgBx img
{
רוחב מקסימלי: 120 פיקסלים;
}
.container .card .contentBx
{
מיקום: קרוב משפחה;
שוליים למעלה: 20 פיקסלים;
יישור טקסט: מרכז;
}
.container .card .contentBx h2
{
צבע: # 32a3b1;
משקל גופן: 700;
גודל גופן: 1.4em;
ריווח אותיות: 2 פיקסלים;
}
.container .card .contentBx עמ '
{
צבע: # 32a3b1;
}
.container .card .contentBx א
{
תצוגה: בלוק מוטבע;
ריפוד: 10 פיקסלים 20 פיקסלים;
שוליים למעלה: 15 פיקסלים;
גבול רדיוס: 40 פיקסלים;
צבע: # 32a3b1;
גודל גופן: 16 פיקסלים;
קישוט טקסט: אין;
תיבת צל: -4px -4px 15px rgba (255,255,255,1), 4px 4px 15px rgba (0,0,0,0.1);
}
.container .card .contentBx a: רחף
{
תיבת צל: שיבוץ -4px -4px 10px rgba (255,255,255,0.5), inset 4px 4px 10px rgba (0,0,0,0.1);
}
. מיכל. כרטיס א: טווח רחף
{
בלוק תצוגה;
טרנספורמציה: סולם (0.98);
}
.container .card: רחף .imgBx,
.container .card: רחף .contentBx
{
טרנספורמציה: סולם (0.98);
}

2. צורה נוירופית

השתמש בקטעי קוד ה- HTML וה- CSS הבאים כדי ליצור את הטופס הנוירופרי שלעיל.

קוד HTML

הירשם










 התחברות

קוד CSS

גוף, html {
צבע רקע: # EBECF0;
}
גוף, p, קלט, בחר, טקסט אזור, כפתור {
משפחת גופן: "מונסראט", סנס-סריף;
ריווח בין אותיות: -0.2px;
גודל גופן: 16 פיקסלים;
}
div, p {
צבע: #BABECC;
טקסט צל: 1px 1px 1px #FFF;
}
טופס {
ריפוד: 16 פיקסלים;
רוחב: 320 פיקסלים;
שוליים: 0 אוטומטי;
}
.סגמנט {
ריפוד: 32 פיקסלים 0;
יישור טקסט: מרכז;
}
כפתור, קלט {
גבול: 0;
מתאר: 0;
גודל גופן: 16 פיקסלים;
גבול רדיוס: 320 פיקסלים;
ריפוד: 16 פיקסלים;
צבע רקע: # EBECF0;
טקסט צל: 1 פיקסלים 1 פיקסלים 0 #FFF;
}
תווית {
בלוק תצוגה;
שוליים למטה: 24 פיקסלים;
רוחב: 100%;
}
קלט {
שוליים מימין: 8 פיקסלים;
תיבת-צל: שיבוץ 2 פיקסלים 2 פיקסלים 5 פיקסלים # BABECC, שיבוץ -5 פיקסלים -5 פיקסלים 10 פיקסלים #FFF;
רוחב: 100%;
גודל תיבה: גבול-תיבה;
מעבר: כל 0.2s קלות-ב-אאוט;
מראה: אין;
-מראה -webkit: אין;
}
קלט: מיקוד {
תיבת צל: שיבוץ 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
כפתור {
צבע: # 61677C;
מודגש;
תיבת צל: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
מעבר: כל 0.2s קלות-ב-אאוט;
סמן: מצביע;
משקל גופן: 600;
}
כפתור: רחף {
תיבת צל: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
}
כפתור: פעיל {
תיבת צל: שיבוץ 1px 1px 2px #BABECC, inset -1px -1px 2px #FFF;
}
כפתור. אייקון {
שוליים מימין: 8 פיקסלים;
}
button.unit {
גבול רדיוס: 8 פיקסלים;
קו גובה: 0;
רוחב: 48 פיקסלים;
גובה: 48 פיקסלים;
תצוגה: inline-flex;
justify-content: center;
פריטי יישור: מרכז;
שוליים: 0 8 פיקסלים;
גודל גופן: 19.2 פיקסלים;
}
button.unit .icon {
שוליים-ימניים: 0;
}
button.red {
בלוק תצוגה;
רוחב: 100%;
צבע: # AE1100;
}
. קבוצת קלט {
תצוגה: flex;
פריטי יישור: מרכז;
justify-content: flex-start;
}
תווית קבוצת-קלט {
שוליים: 0;
להגמיש: 1;
}

3. Navbar Neumorphic

השתמש בקטעי קוד ה- HTML, CSS ו- JavaScript הבאים כדי ליצור את סרגל הניווט הנורומפי שלעיל.

קוד HTML

קָשׁוּר: האתרים הטובים ביותר לדוגמאות קידוד HTML איכותיות

Navbar Neumorphic

קוד CSS

* {
שוליים: 0;
ריפוד: 0;
גודל תיבה: גבול-תיבה;
}
גוף {
צבע רקע: # דמי תשלום;
}
.nav {
רוחב: 100 וולט;
גובה: 100 פיקסלים;
צבע רקע: # דמי תשלום;
תיבת צל: 10 פיקסלים 10 פיקסלים 12 פיקסלים 0 rgba (0, 0, 0, 0.07);
גבול רדיוס: 0 0 10 פיקסלים 10 פיקסלים;
תצוגה: flex;
justify-content: flex-end;
פריטי יישור: מרכז;
ריפוד: 0 3rem;
רשימת סגנון-סוג: אין;
}
.nav li.logo {
שוליים מימין: אוטומטי;
משפחת גופנים: "רובוטו", סנס-סריף;
גודל גופן: 1.5rem;
צבע: אפור
משקל גופן: 900;
טקסט-צל: 2 פיקסלים 2 פיקסלים 4 פיקסלים rgba (0, 0, 0, 0.3), -2 פיקסלים -2 פיקסלים 4 פיקסלים לבן;
}
.nav li: לא (.logo) {
שוליים: 0 1rem;
ריפוד: 0.5rem 1.5rem;
גבול: 2px rgba מוצק (255, 255, 255, 0.3);
תיבת צל: 4px 4px 6px 0 rgba (0, 0, 0, 0.1), -4px -4px 6px לבן;
גבול רדיוס: 10 פיקסלים;
משפחת גופנים: "רובוטו", סנס-סריף;
סמן: מצביע;
מעבר: צבע 0.2s להקל, להפוך 0.2 שניות להקל;
צבע: אפור
}
.nav li: לא (.logo): רחף {
טרנספורמציה: סולם (1.05);
תיבת צל: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px לבן;
}
.nav li: לא (.logo): מיקוד {
מתווה: אין;
טרנספורמציה: סולם (0.95);
תיבת צל: 4px 4px 10px 0 rgba (0, 0, 0, 0.1), -4px -4px 10px white, 4px 4px 10px 0 rgba (0, 0, 0, 0.1) inset, -4px -4px 10px inet לבן;
}
.nav li: לא (.logo): רחף, .nav li: לא (.logo): מיקוד {
צבע: אורנג ';
}

קוד JavaScript

feather.replace ();

4. טקסט וצורות נוימורפיות

השתמש בקטעי קוד ה- HTML וה- CSS הבאים ליצירת הטקסט והצורות הניאומורפיים שלעיל.

קוד HTML

קָשׁוּר: גיליון הרמאות של HTML Essentials

מעגל

סופגניה

כיכר

כיכר חלקה

כּוֹס

טקסט נוירומפי

ברוך הבא ל- MUO

קוד CSS

קָשׁוּר: דוגמאות פשוטות לקוד CSS שתוכלו ללמוד תוך 10 דקות

*, *:: לפני, *:: אחרי {
גודל תיבה: גבול-תיבה;
}
:שורש {
- nColor: #aaa;
--brShadow: -6px 6px 10px rgba (0,0,0,0.5);
--tlShadow: 6px -6px 10px rgba (255,255,255,0.5);
}
גוף {
שוליים: 0;
משפחת גופנים: sans-serif;
גובה דקה: 100 וואט;
תצוגה: flex;
פריטי יישור: מרכז;
justify-content: center;
לכופף לכופף: לעטוף;
רקע: var (- nColor);
}
.התחלה,
.n-inset {
תצוגה: flex;
פריטי יישור: מרכז;
justify-content: center;
}
.n מעגל {
צבע רקע: var (- nColor);
תיבת צל: var (- brShadow), var (- tlShadow);
גבול-רדיוס: 50%;
רוחב: 200 פיקסלים;
גובה: 200 פיקסלים;
שוליים: 10 פיקסלים;
}
.n- סופגנייה {
צבע רקע: var (- nColor);
תיבת צל: var (- brShadow), var (- tlShadow);
גבול-רדיוס: 50%;
רוחב: 200 פיקסלים;
גובה: 200 פיקסלים;
שוליים: 10 פיקסלים;
}
.n- סופגנייה .n-inset {
צבע רקע: var (- nColor);
תיבת צל: inset var (- brShadow), inset var (- tlShadow);
גבול-רדיוס: 50%;
רוחב: 50%;
גובה: 50%;
שוליים: 0;
}
.n- כוסית {
צבע רקע: var (- nColor);
תיבת צל: var (- brShadow), var (- tlShadow);
גבול-רדיוס: 50%;
רוחב: 200 פיקסלים;
גובה: 200 פיקסלים;
שוליים: 10 פיקסלים;
}
.n-tumbler .n-outset {
צבע רקע: var (- nColor);
תיבת צל: var (- brShadow), var (- tlShadow);
גבול-רדיוס: 50%;
רוחב: 80%;
גובה: 80%;
שוליים: 0;
}
.n מרובע {
צבע רקע: var (- nColor);
תיבת צל: var (- brShadow), var (- tlShadow);
גבול-רדיוס: 0;
רוחב: 200 פיקסלים;
גובה: 200 פיקסלים;
שוליים: 10 פיקסלים;
}
.n-smooth-sq {
צבע רקע: var (- nColor);
תיבת צל: var (- brShadow), var (- tlShadow);
גבול רדיוס: 10%;
רוחב: 200 פיקסלים;
גובה: 200 פיקסלים;
שוליים: 10 פיקסלים;
}
.n-text {
צבע: var (- nColor);
טקסט-צל: var (- brShadow), var (- tlShadow);
גודל גופן: 6em;
מודגש;
}

5. כפתורים נוירופיים

השתמש בקטעי הקוד של HTML, CSS ו- JavaScript כדי ליצור את הכפתורים הניאומורפיים שלעיל.

קוד HTML

לחץ על הכפתורים




play_arrow


הַפסָקָה





לְעַרְבֵּב

קוד CSS

כתובת url @ (' https://fonts.googleapis.com/icon? משפחה = חומר + סמלים ');
גוּף{
צבע רקע: # 6ec7ff;
}
מחזיק .btn {
בלוק תצוגה;
שוליים: 0 אוטומטי;
שוליים למעלה: 64 פיקסלים;
יישור טקסט: מרכז;
}
.טקסט מבוא{
שוליים תחתונים: 48 פיקסלים;
משפחת גופנים: 'חול טובעני', סנס-סריף;
צבע לבן;
גודל גופן: 18 פיקסלים;
}
.btn {
רוחב: 110 פיקסלים;
גובה: 110 פיקסלים;
גודל גופן: 30 פיקסלים;
גבול רדיוס: 30 פיקסלים;
גבול: אין;
צבע לבן;
יישור אנכי: עליון;
-Webkit-מעבר: .6s קלות-ב-אאוט;
מעבר: .6s קלות-ב-אאוט;
}
.btn: רחף {
סמן: מצביע;
}
.btn: להתמקד {
מתווה: אין;
}
.btn: ראשון מסוג {
שוליים מימין: 30 פיקסלים;
}
. pneumorphic {
רקע: שיפוע ליניארי (145deg, # 76d5ff, # 63b3e6);
תיבת צל: 30 פיקסלים 30 פיקסלים 40 פיקסלים # 1e7689,
-30 פיקסלים -30 פיקסלים 40 פיקסלים # 7fe5ff;
גבול: 3px מוצק rgba (255, 255, 255, .4);
}
.לחץ פנאומורפי {
רקע: שיפוע ליניארי (145deg, # 63b3e6, # 76d5ff);
-webkit-box-shadow: הבלעה 15px 15px 20px -20px rgba (0,0,0, .5);
-moz-box-shadow: הבלעה 15px 15px 20px -20px rgba (0,0,0, .5);
תיבת צל: שיבוץ 15px 15px 20px -20px rgba (0,0,0, .5);
}
. pneumorphic: פוקוס,. pneumorphic: רחף,. pneumorphic: פוקוס,. pneumorphic: רחף,. pneumorphic- לחוץ: פוקוס,. pneumorphic- לחוץ: רחף {
גבול: 3px rgba מוצק (46, 74, 112, .75);
}
.material-icon {
משפחת גופנים: 'סמלים מהותיים';
משקל גופן: רגיל;
סגנון גופן: רגיל;
גודל גופן: 32 פיקסלים;
תצוגה: בלוק מוטבע;
קו גובה: 1;
שינוי טקסט: אין;
ריווח בין אותיות: רגיל;
עטיפת מילים: רגילה;
חלל לבן: nowrap;
כיוון: ltr;
-החלפת גופנים -webkit: נגד התייחסות;
עיבוד טקסט: optimizeLegibility;
-moz-osx-font-smoothing: גווני אפור;
הגדרות גופן-תכונות: 'ליגה';
}
#pause {
צבע: # 143664;
אל תציג דבר;
}

קוד JavaScript

function changeStyle (btnPressed) {
var btn = document.getElementById (btnPressed);
btn.classList.toggle ("נאומורפי");
btn.classList.toggle ("לחיצה ניאורורפית");
if (btnPressed 'play-pause') {
לְשַׂחֵק();
} אחר אם (btn לחץ על 'shuffle-btn') {
לְעַרְבֵּב();
}
}
הפעל פונקציה () {
var playBtn = document.getElementById ('play');
var pauseBtn = document.getElementById ('הפסקה');
אם (playBtn.style.display 'none') {
playBtn.style.display = 'חסום';
pauseBtn.style.display = 'אין';
} אחר {
playBtn.style.display = 'אין';
pauseBtn.style.display = 'חסום';
}
}
פונקציה דשדשה () {
var shuffleBtn = document.getElementById ('shuffle-btn');
אם (shuffleBtn.style.color == 'לבן' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664';
} אחר {
shuffleBtn.style.color = 'לבן';
}
}

אם אתה רוצה להסתכל על קוד המקור השלם המשמש במאמר זה, הנה מאגר GitHub.

הערה: הקוד המשמש במאמר זה הוא מורשה MIT.

עצב את האתר שלך עם נוירורפיזם

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

ישנן דרכים שונות להעניק לאתר מראה אלגנטי. אם ברצונך לעצב תיבות סתמיות באתר האינטרנט שלך, תן למאפיין CSS של תיבת הצל.

יובראג 'צ'נדרה (33 מאמרים פורסמו)

יוברג 'הוא סטודנט לתואר ראשון במדעי המחשב באוניברסיטת דלהי, הודו. הוא נלהב מפיתוח אתרים של Full Stack. כשהוא לא כותב, הוא בוחן את עומק הטכנולוגיות השונות.

עוד מאת יוברג 'צ'נדרה