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

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

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

 

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

 

في هذا البرنامج [Neumorphism Profile Card UI Design] ، توجد بطاقة ملف تعريف ذات تأثير جديد. تحتوي هذه البطاقة على صورة الملف الشخصي وأزرار الوسائط الاجتماعية وبعض معلومات الوسائط الاجتماعية. عندما تحوم فوق أزرار وسائط اجتماعية معينة ، يظهر تأثير Neomorphic.

 

تعتمد هذه البطاقة بالكامل على HTML و CSS. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج [Neumorphism Profile Card UI Design].

 

في الفيديو ، شاهدت تصميم واجهة مستخدم بطاقة ملف تعريف Neumorphism مع تأثير Neuromorphic على Hover. أتمنى أن تكون قد فهمت الرموز وراء إنشاء هذه البطاقة. هذا برنامج CSS خالص يعني أنه يتم استخدام HTML و CSS فقط لإنشاء هذه البطاقة والتأثير الجديد. لذلك إذا كنت مبتدئًا ، فيمكنك أيضًا إنشاء هذا النوع من بطاقات الملف الشخصي.

 

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

 

تصميم واجهة مستخدم بطاقة ملف تعريف Neumorphism

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow