Bandar Abuseada نشر 15 يناير أرسل تقرير مشاركة نشر 15 يناير ما رأيكم في تصميم هذه الcard هل من شيء يمكنني فعله افضل من ذلك؟ الكود <div className='card'> <img className='cardimage' alt='none' src={imgagea} /> <p>Bandar</p> <p>Css & javascript & React</p> <div className='icons'> <p><i className='gg-instagram'></i></p> <p><i className='gg-instagram'></i></p> <p><i className='gg-instagram'></i></p> </div> <button>Cotext</button> </div> css .card{ margin: auto; max-width: 300px; height: 300px; text-align: center; background: #fff; } .cardimage{ max-width: 300px; } .card p:nth-child(2){ font-weight: bold; } .card button{ width: 100%; text-decoration: none; border: none; background-color: rgb(32, 20, 20); color: #fff; font-weight: 900; padding: 10px; position: relative; bottom: 10px; } .card button:hover{ width: 100%; border: none; background-color: rgba(32, 20, 20, 0.521); color: #fff; font-weight: 900; padding: 10px; } .icons{ display: flex; justify-content: space-evenly; position: relative; bottom: 10px; } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 15 يناير أرسل تقرير مشاركة نشر 15 يناير التصميم جيد ولكن هذه بعض الملاحظات : قم بتنعيم الحواف قليلاً (سيعطي البطاقة شكل اكثر اناقة) بإضافة border-radius للزر والصورة اضف hover effect لكل من الصورة والزر و ازرار المشاركة قم بإضافة الوان مختلفة (اكثر حيوية) 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سمير عبود نشر 15 يناير أرسل تقرير مشاركة نشر 15 يناير التصميم جيد نوعاً ما لكن إليك بعض التحسينات التي يمكنك إضافتها: إضفاء بعض الحركية و التأثيرات للبطاقة نفسها هناك الكثير من التأثيرات كـ قلب البطاقة (flip) أو (zoom in) و غيرها، تستطيع الإقتباس من تصميمات موجودة على الإنترنت فقط أكتب في حقل البحث بالشكل التالي: zoom in card css example codepen يمكنك تغيير نوع التأثير الذي تريد إضافته. تنعيم الحواف بإضافة border-radius مناسب. تعويم البطاقة بإضافة ظل لها عبر خاصية box-shadow المتاحة في CSS، يمكنك الإقتباس من خلال الرابط التالي: إضغط هنا إستخدام خطوط ملائمة، تستطيع إستخدام خطوط Google. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Bandar Abuseada
ما رأيكم في تصميم هذه الcard هل من شيء يمكنني فعله افضل من ذلك؟
الكود
css
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.