body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 20px 0;
overflow: hidden;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-10px);
}
.card img {
width: 100%;
height: auto;
}
.card-body {
padding: 15px;
}
.card-title {
font-size: 1.5em;
margin-bottom: 10px;
}
.card-text {
color: #555;
}

CSS: تصميم بطاقات Cards حديثة

مقدمة إلى تصميم البطاقات الحديثة

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

تصميم بطاقة بسيطة باستخدام CSS

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

<div class=\"card\">
        <img src=\"image.jpg\" alt=\"صورة البطاقة\">
        <div class=\"card-body\">
            <h3 class=\"card-title\">عنوان البطاقة</h3>
            <p class=\"card-text\">هذا نص توضيحي عن محتوى البطاقة. يمكن أن يتضمن هذا النص معلومات مفيدة أو ملخص عن المحتوى المعروض.</p>
        </div>
    </div>

إضافة عناصر تفاعلية إلى البطاقات

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

<div class=\"card\">
        <img src=\"image.jpg\" alt=\"صورة البطاقة\">
        <div class=\"card-body\">
            <h3 class=\"card-title\">عنوان البطاقة</h3>
            <p class=\"card-text\">هذا نص توضيحي عن محتوى البطاقة. يمكن أن يتضمن هذا النص معلومات مفيدة أو ملخص عن المحتوى المعروض.</p>
            <button style=\"padding: 10px 20px;border: none;background-color: #007BFF;color: white;border-radius: 5px;cursor: pointer\">إقرأ المزيد</button>
        </div>
    </div>