اذهب إلى المحتوى

السؤال

نشر

ما رأيكم في تصميم هذه ال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;
}

 

Annotation 2024-01-15 115458.png

Recommended Posts

  • 0
نشر

التصميم جيد ولكن هذه بعض الملاحظات :

  • قم بتنعيم الحواف قليلاً (سيعطي البطاقة شكل اكثر اناقة) بإضافة border-radius للزر  والصورة
  • اضف hover effect لكل من الصورة والزر و ازرار المشاركة
  • قم بإضافة الوان مختلفة (اكثر حيوية)

 

  • 0
نشر

التصميم جيد نوعاً ما لكن إليك بعض التحسينات التي يمكنك إضافتها:

  • إضفاء بعض الحركية و التأثيرات للبطاقة نفسها هناك الكثير من التأثيرات كـ قلب البطاقة (flip) أو (zoom in) و غيرها، تستطيع الإقتباس من تصميمات موجودة على الإنترنت فقط أكتب في حقل البحث بالشكل التالي:
zoom in card css example codepen

يمكنك تغيير نوع التأثير الذي تريد إضافته.

  • تنعيم الحواف بإضافة border-radius مناسب.
  • تعويم البطاقة بإضافة ظل لها عبر خاصية box-shadow المتاحة في CSS، يمكنك الإقتباس من خلال الرابط التالي: إضغط هنا
  • إستخدام خطوط ملائمة، تستطيع إستخدام خطوط Google.

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...