كيفية تصميم لوحة مفاتيح Neumorphism باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية تصميم لوحة مفاتيح Neumorphism باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية تصميم لوحة مفاتيح Neumorphism باستخدام HTML و CSS فقط.

 

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

 

في هذا البرنامج (تصميم لوحة المفاتيح Neumorphism) ، على صفحة الويب ، لا يوجد سوى لوحة مفاتيح ذات تأثير جديد. هذا برنامج CSS خالص مما يعني أنه تم إنشاء لوحة المفاتيح هذه باستخدام HTML و CSS فقط لأغراض التصميم ، لذلك لا تعمل مفاتيح لوحة المفاتيح هذه ، مما يعني أنه عند النقر فوق المفتاح المحدد ، لا يظهر سوى تأثير جديد. إذا كنت ترغب في عرض البيانات بضغطة مفتاح معينة ، فأنت بحاجة إلى إضافة JavaScript لذلك.

 

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (Neumorphism Keyboard Design).

 

في الفيديو ، لقد شاهدت تأثير النقر الجديد لهذا البرنامج (Neumorphism Keyboard) وآمل أن تكون قد فهمت الرموز وراء إنشاء هذا البرنامج. كما تعلم ، لقد استخدمت HTML و CSS فقط لإنشاء لوحة المفاتيح هذه ، لذلك لا توجد رموز واسعة لفهمها. إذا كنت تريد عرض البيانات عند الضغط على مفتاح ولا تعرف جافا سكريبت ، فيمكنك التعليق على ما سأفعله لك في المدونة التالية.

 

إذا كنت تحب هذا البرنامج (Neumorphism Keyboard Design) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

 

تصميم لوحة المفاتيح Neumorphism

لإنشاء هذا البرنامج (Neumorphism Keyboard Design). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow