Neumorphism هو اتجاه تصميم جديد يجمع بين التصميم المسطح والتشابه. إنها طريقة بسيطة للتصميم بمظهر بلاستيكي ناعم مقذوف وشكل ثلاثي الأبعاد تقريبًا. حاليًا ، يتجه هذا التصميم عبر الإنترنت ويستخدم على نطاق واسع من قبل المصممين والمطورين.

إذا كنت ترغب في تجربة neumorphism لمشروعك التالي ، فإليك بعض مقتطفات التعليمات البرمجية لتبدأ.

1. بطاقات Neumorphic

استخدم مقتطفات كود HTML و CSS التالية لإنشاء بطاقات neumorphic أعلاه.

كود HTML

تصميم

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

اقرأ أكثر
















شفرة

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

اقرأ أكثر
















إطلاق

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

اقرأ أكثر

كود CSS

import url (' https://fonts.googleapis.com/css? family = Poppins: 400،500،600،700،800،900 & display = swap ') ؛
*
{
الهامش: 0؛
حشوة: 0 ؛
حجم الصندوق: مربع الحدود ؛
عائلة الخطوط: 'Poppins'، sans-serif؛
}
الجسم
{
عرض: فليكس ؛
تبرير المحتوى: مركز ؛
محاذاة العناصر: مركز ؛
الحد الأدنى للارتفاع: 100 فولت ؛
الخلفية: # ebf5fc ؛
}
.وعاء
{
الموقف: نسبي ؛
عرض: فليكس ؛
تبرير المحتوى: مسافة ؛
محاذاة العناصر: مركز ؛
التفاف المرن: التفاف.
العرض: 1100 بكسل ؛
}
.container .card
{
العرض: 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: hover
{
مربع الظل: أقحم -6px -6px 20px rgba (255،255،255،0.5) ، أقحم 6px 6px 20px rgba (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 p
{
اللون: # 32a3b1 ؛
}
.container .card .contentBx أ
{
عرض: مضمنة كتلة ؛
الحشو: 10 بكسل 20 بكسل ؛
أعلى الهامش: 15 بكسل ؛
نصف قطر الحدود: 40 بكسل ؛
اللون: # 32a3b1 ؛
حجم الخط: 16 بكسل ؛
زخرفة النص: لا شيء ؛
مربع الظل: -4 بكسل -4 بكسل 15 بكسل rgba (255،255،255،1) ، 4 بكسل 4 بكسل 15 بكسل rgba (0،0،0،0.1) ؛
}
.container .card .contentBx a: hover
{
مربع الظل: أقحم -4 بكسل -4 بكسل 10 بكسل rgba (2552552550.5) ، أقحم 4 بكسل 4 بكسل 10 بكسل rgba (0،0،0،0.1) ؛
}
.container .card أ: امتداد التمرير
{
العرض محجوب؛
تحويل: مقياس (0.98) ؛
}
.container .card: مرر .imgBx ،
.container .card: التمرير فوق .contentBx
{
تحويل: مقياس (0.98) ؛
}

2. شكل نيومورفيك

استخدم مقتطفات كود HTML و CSS التالية لإنشاء النموذج neumorphic أعلاه.

كود HTML

اشتراك










 تسجيل الدخول

كود CSS

الجسم ، html {
لون الخلفية: # EBECF0 ؛
}
الجسم ، ع ، الإدخال ، تحديد ، منطقة النص ، الزر {
عائلة الخطوط: "Montserrat"، sans-serif؛
تباعد الأحرف: -0.2 بكسل ؛
حجم الخط: 16 بكسل ؛
}
div ، p {
اللون: #BABECC ؛
ظل النص: 1 بكسل 1 بكسل 1 بكسل #FFF ؛
}
شكل {
الحشو: 16 بكسل ؛
العرض: 320 بكسل ؛
الهامش: 0 تلقائي ؛
}
.قطعة {
الحشو: 32 بكسل 0 ؛
محاذاة النص: مركز ؛
}
زر ، إدخال {
الحدود: 0؛
المخطط التفصيلي: 0 ؛
حجم الخط: 16 بكسل ؛
نصف قطر الحدود: 320 بكسل ؛
الحشو: 16 بكسل ؛
لون الخلفية: # EBECF0 ؛
ظل النص: 1 بكسل 1 بكسل 0 #FFF ؛
}
ضع الكلمة المناسبة {
العرض محجوب؛
الهامش السفلي: 24 بكسل ؛
العرض: 100٪؛
}
الإدخال {
الهامش الأيمن: 8 بكسل ؛
مربع الظل: أقحم 2px 2px 5px #BABECC ، أقحم -5px -5px 10px #FFF ؛
العرض: 100٪؛
حجم الصندوق: مربع الحدود ؛
الانتقال: كل 0.2 ثانية سهل الخروج ؛
المظهر: لا شيء ؛
-مظهر مجموعة الويب: لا شيء ؛
}
الإدخال: التركيز {
مربع الظل: أقحم 1px 1px 2px #BABECC ، أقحم -1px -1px 2px #FFF ؛
}
زر {
اللون: # 61677C ؛
وزن الخط: عريض ؛
مربع الظل: -5px -5px 20px #FFF، 5px 5px 20px #BABECC ؛
الانتقال: كل 0.2 ثانية سهل الخروج ؛
المؤشر: المؤشر.
وزن الخط: 600 ؛
}
الزر: تحوم {
مربع الظل: -2px -2px 5px #FFF، 2px 2px 5px #BABECC ؛
}
زر: نشط {
مربع الظل: أقحم 1px 1px 2px #BABECC ، أقحم -1px -1px 2px #FFF ؛
}
زر .icon {
الهامش الأيمن: 8 بكسل ؛
}
button.unit {
نصف قطر الحدود: 8 بكسل ؛
ارتفاع الخط: 0 ؛
العرض: 48 بكسل ؛
الارتفاع: 48 بكسل ؛
عرض: مضمنة المرن ؛
تبرير المحتوى: مركز ؛
محاذاة العناصر: مركز ؛
الهامش: 0 8 بكسل ؛
حجم الخط: 19.2 بكسل ؛
}
button.unit .icon {
الهامش الأيمن: 0 ؛
}
button.red {
العرض محجوب؛
العرض: 100٪؛
اللون: # AE1100 ؛
}
.input-group {
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: بداية مرنة ؛
}
تسمية .input-group {
الهامش: 0؛
المرن: 1 ؛
}

3. نيومورفيك نافبار

استخدم مقتطفات كود HTML و CSS وجافا سكريبت التالية لإنشاء شريط التنقل neumorphic أعلاه.

كود HTML

متعلق ب: أفضل المواقع لأمثلة على ترميز HTML عالي الجودة

نيومورفيك نافبار

كود CSS

* {
الهامش: 0؛
حشوة: 0 ؛
حجم الصندوق: مربع الحدود ؛
}
الجسم {
لون الخلفية: #efeeee ؛
}
.nav {
العرض: 100vw ؛
الارتفاع: 100 بكسل ؛
لون الخلفية: #efeeee ؛
مربع الظل: 10 بكسل 10 بكسل 12 بكسل 0 rgba (0 ، 0 ، 0 ، 0.07) ؛
نصف قطر الحدود: 0 0 10 بكسل 10 بكسل ؛
عرض: فليكس ؛
تبرير المحتوى: نهاية مرنة ؛
محاذاة العناصر: مركز ؛
الحشو: 0 3rem ؛
نوع نمط القائمة: لا شيء ؛
}
.nav li.logo {
الهامش الأيمن: تلقائي ؛
عائلة الخطوط: "Roboto"، sans-serif؛
حجم الخط: 1.5rem ؛
اللون: رمادي باهت.
وزن الخط: 900 ؛
ظل النص: 2 بكسل 2 بكسل 4 بكسل rgba (0 ، 0 ، 0 ، 0.3) ، -2 بكسل -2 بكسل 4 بكسل أبيض ؛
}
.nav li: not (.logo) {
الهامش: 0 1rem ؛
الحشو: 0.5 ريم 1.5 ريم ؛
الحد: 2 بكسل صلب rgba (255 ، 255 ، 255 ، 0.3) ؛
مربع الظل: 4 بكسل 4 بكسل 6 بكسل 0 rgba (0 ، 0 ، 0 ، 0.1) ، -4 بكسل -4 بكسل 6 بكسل أبيض ؛
نصف قطر الحدود: 10 بكسل ؛
عائلة الخطوط: "Roboto"، sans-serif؛
المؤشر: المؤشر.
الانتقال: سهولة خروج اللون 0.2 ثانية ، سهولة التحوُّل 0.2 ثانية ؛
اللون: رمادي باهت.
}
.nav li: not (.logo): تحوم {
تحويل: مقياس (1.05) ؛
مربع الظل: 4 بكسل 4 بكسل 10 بكسل 0 rgba (0 ، 0 ، 0 ، 0.1) ، -4 بكسل -4 بكسل 10 بكسل أبيض ؛
}
.nav li: not (.logo): التركيز {
المخطط التفصيلي: لا شيء ؛
تحويل: مقياس (0.95) ؛
مربع الظل: 4 بكسل 4 بكسل 10 بكسل 0 rgba (0 ، 0 ، 0 ، 0.1) ، -4 بكسل -4 بكسل 10 بكسل أبيض ، 4 بكسل 4 بكسل 10 بكسل 0 rgba (0 ، 0 ، 0 ، 0.1) أقحم ، -4 بكسل -4 بكسل 10 بكسل أبيض أقحم ؛
}
.nav li: not (.logo): hover، .nav li: not (.logo): focus {
اللون: البرتقال.
}

كود جافا سكريبت

الريشة () ؛

4. النص والأشكال الحديثة

استخدم مقتطفات كود HTML و CSS التالية لإنشاء النص والأشكال الحديثة أعلاه.

كود HTML

متعلق ب: ورقة الغش في أساسيات HTML

دائرة

الدونات

ميدان

مربع ناعم

بهلوان

نص Neumorphic

مرحبًا بك في 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 فولت ؛
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مركز ؛
التفاف المرن: التفاف.
الخلفية: var (- nColor) ؛
}
.n-outset ،
.n-inset {
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مركز ؛
}
.n- دائرة {
لون الخلفية: var (- nColor) ؛
مربع الظل: var (- brShadow) ، var (- tlShadow) ؛
نصف قطر الحدود: 50٪ ؛
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الهامش: 10 بكسل ؛
}
.n-donut {
لون الخلفية: var (- nColor) ؛
مربع الظل: var (- brShadow) ، var (- tlShadow) ؛
نصف قطر الحدود: 50٪ ؛
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الهامش: 10 بكسل ؛
}
.n-donut .n-inset {
لون الخلفية: var (- nColor) ؛
مربع الظل: var (- brShadow) الداخلي ، 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-square {
لون الخلفية: var (- nColor) ؛
مربع الظل: var (- brShadow) ، var (- tlShadow) ؛
نصف قطر الحدود: 0 ؛
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الهامش: 10 بكسل ؛
}
.n-smooth-sq {
لون الخلفية: var (- nColor) ؛
مربع الظل: var (- brShadow) ، var (- tlShadow) ؛
نصف قطر الحدود: 10٪ ؛
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الهامش: 10 بكسل ؛
}
.n- نص {
اللون: var (- nColor) ؛
ظل النص: var (- brShadow) ، var (- tlShadow) ؛
حجم الخط: 6em ؛
وزن الخط: عريض ؛
}

5. أزرار Neumorphic

استخدم مقتطفات كود HTML و CSS و JavaScript التالية لإنشاء الأزرار neumorphic أعلاه.

كود HTML

اضغط على الأزرار




play_arrow


وقفة





خلط

كود CSS

import url (' https://fonts.googleapis.com/icon? الأسرة = المواد + الأيقونات) ؛
الجسم{
لون الخلفية: # 6ec7ff ؛
}
.btn-holder {
العرض محجوب؛
الهامش: 0 تلقائي ؛
الهامش العلوي: 64 بكسل ؛
محاذاة النص: مركز ؛
}
نص .intro {
الهامش السفلي: 48 بكسل ؛
عائلة الخطوط: 'Quicksand'، sans-serif؛
اللون الابيض؛
حجم الخط: 18 بكسل ؛
}
.btn {
العرض: 110 بكسل ؛
الارتفاع: 110 بكسل ؛
حجم الخط: 30 بكسل ؛
نصف قطر الحدود: 30 بكسل ؛
الحدود: لا شيء ؛
اللون الابيض؛
محاذاة عمودية: أعلى ؛
-webkit- الانتقال: .6s سهولة في الخروج ؛
الانتقال: .6s سهولة في الخروج ؛
}
.btn: مرر {
المؤشر: المؤشر.
}
.btn: التركيز {
المخطط التفصيلي: لا شيء ؛
}
.btn: الأول من نوعه {
الهامش الأيمن: 30 بكسل ؛
}
.neumorphic {
الخلفية: التدرج الخطي (145 درجة ، # 76d5ff ، # 63b3e6) ؛
مربع الظل: 30 بكسل 30 بكسل 40 بكسل # 1e7689 ،
-30 بكسل -30 بكسل 40 بكسل # 7fe5ff ؛
الحدود: 3 بكسل صلبة rgba (255 ، 255 ، 255 ، .4) ؛
}
ضغط هوائي. {
الخلفية: التدرج الخطي (145 درجة ، # 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) ؛
}
.neumorphic: focus، .neumorphic: hover، .neumorphic: focus، .neumorphic: hover،.
الحدود: 3 بكسل صلبة rgba (46 ، 74 ، 112 ، .75) ؛
}
.material-icon {
عائلة الخطوط: "أيقونات المواد" ؛
وزن الخط: عادي ؛
نمط الخط: عادي ؛
حجم الخط: 32 بكسل ؛
عرض: مضمنة كتلة ؛
ارتفاع الخط: 1 ؛
تحويل النص: لا شيء ؛
تباعد الحروف: عادي ؛
التفاف الكلمات: عادي ؛
مسافة بيضاء: نوراراب.
الاتجاه: لتر ؛
-webkit-font-smoothing: antialiased ؛
تقديم النص: تحسين الأهلية ؛
-موز- osx- الخط- تجانس: تدرج الرمادي ؛
إعدادات ميزة الخط: 'liga'؛
}
#وقفة {
اللون: # 143664 ؛
عرض لا شيء؛
}

كود جافا سكريبت

تغيير الوظيفة (btnPressed) {
var btn = document.getElementById (btnPressed) ،
btn.classList.toggle ("neumorphic") ؛
btn.classList.toggle ("ضغط نيومورفيك") ؛
إذا (btnPressed 'play-pause') {
لعب()؛
} else if (btnPressed 'shuffle-btn') {
خلط()؛
}
}
وظيفة اللعب () {
var playBtn = document.getElementById ('play') ،
var pauseBtn = document.getElementById ('pause') ،
إذا (playBtn.style.display 'لا شيء') {
playBtn.style.display = 'block' ؛
pauseBtn.style.display = 'لا شيء' ،
} آخر {
playBtn.style.display = 'لا شيء' ،
pauseBtn.style.display = 'block' ؛
}
}
تبديل الوظيفة () {
var shuffleBtn = document.getElementById ('shuffle-btn') ،
إذا (shuffleBtn.style.color == 'white' || shuffleBtn.style.color == '') {
shuffleBtn.style.color = '# 143664' ؛
} آخر {
shuffleBtn.style.color = "أبيض" ،
}
}

إذا كنت تريد إلقاء نظرة على التعليمات البرمجية المصدر الكاملة المستخدمة في هذه المقالة ، فإليك ملف مستودع جيثب.

ملحوظة: الكود المستخدم في هذه المقالة هو مرخصة من معهد ماساتشوستس للتكنولوجيا.

صمم موقع الويب الخاص بك مع Neumorphism

يمكنك استخدام مفهوم التصميم البسيط لـ neumorphism لتصميم موقع الويب الخاص بك. يوفر نظرة جمالية مبهجة. ولكن مع ذلك ، فإن النيومورفيسم له قيود على إمكانية الوصول.

هناك طرق مختلفة لإضفاء مظهر أنيق على موقع الويب. إذا كنت ترغب في تصميم المربعات اللطيفة على موقع الويب الخاص بك ، فامنح خاصية box-shadow CSS تجربة.

يوفراج شاندرا (33 مقالة منشورة)

يوفراج طالب جامعي في علوم الكمبيوتر بجامعة دلهي بالهند. إنه متحمس لتطوير الويب Full Stack. عندما لا يكتب ، فإنه يستكشف عمق التقنيات المختلفة.

المزيد من Yuvraj Chandra