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 اقتباس
0 عمر قره محمد نشر 15 يناير أرسل تقرير نشر 15 يناير التصميم جيد ولكن هذه بعض الملاحظات : قم بتنعيم الحواف قليلاً (سيعطي البطاقة شكل اكثر اناقة) بإضافة border-radius للزر والصورة اضف hover effect لكل من الصورة والزر و ازرار المشاركة قم بإضافة الوان مختلفة (اكثر حيوية) 1 اقتباس
0 سمير عبود نشر 15 يناير أرسل تقرير نشر 15 يناير التصميم جيد نوعاً ما لكن إليك بعض التحسينات التي يمكنك إضافتها: إضفاء بعض الحركية و التأثيرات للبطاقة نفسها هناك الكثير من التأثيرات كـ قلب البطاقة (flip) أو (zoom in) و غيرها، تستطيع الإقتباس من تصميمات موجودة على الإنترنت فقط أكتب في حقل البحث بالشكل التالي: zoom in card css example codepen يمكنك تغيير نوع التأثير الذي تريد إضافته. تنعيم الحواف بإضافة border-radius مناسب. تعويم البطاقة بإضافة ظل لها عبر خاصية box-shadow المتاحة في CSS، يمكنك الإقتباس من خلال الرابط التالي: إضغط هنا إستخدام خطوط ملائمة، تستطيع إستخدام خطوط Google. 1 اقتباس
السؤال
Bandar Abuseada
ما رأيكم في تصميم هذه الcard هل من شيء يمكنني فعله افضل من ذلك؟
الكود
css
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.