تعرف على كيفية صياغة هذا المكون الجذاب ، واستخدامه لإضافة لمسة احترافية لتصميمات الويب الخاصة بك.

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

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

بنية HTML لمكونات البطاقة

يشتمل تشريح البطاقة على حاوية البطاقة ورأسها وصورتها وجسمها وتذييل بطاقة اختياري.

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

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

<شعبةفصل="حاوية بطاقة">
 بطاقة المحتوى 
<شعبةفصل="بطاقة المحتوى">
<IMG





instagram viewer


src=" https://images.unsplash.com/photo-1500989145603-8e7ef71d639e? ixlib = rb-4.0.3 & ixid = M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA٪ 3D٪ 3D & auto = format & fit = Crop & w = 200 & q = 80 "بديل="مساحة عمل بها دفتر ملاحظات بلوحة مفاتيح وكوب قهوة وسماعة أذن">
<h3>عنوانh3>
<ص>Lorem ipsum dolor sit amet consectetur adipisicing elit. إعلان
 ماعدتوري explicabo molestiae ناتوس ماغنام ريم ...ص>
<أhref="#">اقرأ أكثرأ>
شعبة>
 بطاقة المنتج 
<شعبةفصل="بطاقة المنتج">
<IMGsrc=" https://images.unsplash.com/photo-1505740420928-5e560c06d30e? ixlib = rb-4.0.3 & ixid = M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA٪ 3D٪ 3D & auto = format & fit = Crop & w = 200 & q = 80 "بديل="سماعات على خلفية صفراء">
<h3>اسم المنتجh3>
<ص>$19.99ص>
<ص>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Aspernatur ، voluptatibus.ص>
<أhref="#"><زر>أضف إلى السلةزر>أ>
شعبة>
 بطاقة الملف الشخصي 
<شعبةفصل="بطاقة الملف الشخصي">
<IMGsrc=" https://images.unsplash.com/photo-1535713875002-d1d0cf377fde? ixlib = rb-4.0.3 & ixid = M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA٪ 3D٪ 3D & auto = format & fit = Crop & w = 200 & q = 80 "بديل="رجل أبيض يرتدي قميصًا أسود الزر">
<h3>فلان الفلانيh3>
<ص>مطور ويبص>
<ص>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Expedita tempora eos molestias repellat؟ص>
<أhref="#"فصل="رابط الملف الشخصي">عرض الصفحة الشخصيةأ>
شعبة>
شعبة>

إليك ما يجب أن يبدو عليه هذا في متصفحك ، افتراضيًا ، قبل تطبيق أي نمط مخصص:

إذا كنت تريد إنشاء المزيد من البطاقات أو تضمين المزيد من المحتوى في بطاقة واحدة ، فافعل ذلك قبل المتابعة.

نمط CSS لمكونات البطاقة

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

​​​​​​* {
هامِش: 0;
حشوة: 0;
تحجيم الصندوق: مربع الحدود;
}
.card-container {
حشوة: 20مقصف;
}

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

.content-card,
.product-card,
.profile- بطاقة {
هامِش: 20مقصف;
عرض: ثني;
الاتجاه المرن: عمود;
حدود: 2مقصفصلب#ccc;
نصف قطر الحد: 7مقصف;
أقصى عرض: 250مقصف;
}

ركز الآن على كل بطاقة ، بدءًا من بطاقة المحتوى ، وامنحها لون الخلفية والحشو. أضف محددات فرعية للعناصر الموجودة في بطاقة المحتوى.

صمم الصورة باستخدام أقصى عرض ونصف قطر الحدود. عيّن الهامش وعائلة الخطوط وحجم الخط لـ h3. بالنسبة لعلامة الارتساء ، قم بإزالة زخرفة النص ، واضبط اللون ، وأعلى الهامش ، وحجم الخط.

.content-card {
خلفية: # E9724C;
حشوة: 10مقصف;
}
.content-cardIMG {
أقصى عرض: 100%;
نصف قطر الحد: 5مقصف;
}


.content-cardh3 {
هامِش: 10مقصف 0;
خط العائلة: أحادية;
حجم الخط: 1.5rem;
}
.content-cardأ {
زخرفة النص: لا أحد;
لون: # 6f2ed8;
هامِش: 12 بكسل 0 7مقصف 0;
حجم الخط: 1rem;
}

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

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

.product-cardIMG {
نصف قطر الحد: 5مقصف 5مقصف 0 0;
عرض: 100%;
}
.product-cardh3 {
هامِش: 5مقصف 10مقصف;
خط العائلة: أحادية;
حجم الخط: 1.5rem;
}


.product-cardص {
هامِش: 5مقصف 10مقصف;
خط العائلة: جورجيا, 'مراتجديدرومان', مرات, الرقيق;
}


.product-cardأ {
محاذاة الذات: نهاية مرنة;
}
.product-cardزر {
عرض: 100مقصف;
ارتفاع: 30مقصف;
هامِش: 10مقصف;
حدود: 1مقصفصلب# 8f3642;
نصف قطر الحد: 4مقصف;
لون الخلفية: # FFC857;
وزن الخط: 700;
المؤشر: المؤشر;
}

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

.profile- بطاقةIMG {
نصف قطر الحد: 5مقصف 5مقصف 0 0;
ارتفاع: 200مقصف;
الكائن المناسب: غطاء;
}
.profile- بطاقةh3 {
هامِش: 10مقصف;
خط العائلة: أحادية;
حجم الخط: 1.5rem;
}


.profile- بطاقةص: الأول من نوعه {
هامِش: 0 بكسل 10مقصف;
خط العائلة: 'مراتجديدرومان', مرات, الرقيق;
لون: ردة الذرة الأزرق;
}


.profile- بطاقةص: الأخير من النوع {
هامِش: 5مقصف 10مقصف;
حجم الخط: 0.9rem;
}
.profile- بطاقةأ {
زخرفة النص: لا أحد;
هامِش: 5مقصف 10مقصف 10مقصف 10مقصف;
حشوة: 5مقصف 15مقصف;
محاذاة الذات: مركز;
حدود: 1مقصفصلبردة الذرة الأزرق;
نصف قطر الحد: 15مقصف;
لون: أسود;
خط العائلة: أحادية;
وزن الخط: 500;
}

بعد التصميم ، يجب أن تبدو بطاقاتك كما يلي:

تصميم البطاقة والمرونة

تعد الاستجابة أمرًا حيويًا لتوفير تجربة سلسة مع الواجهة عبر الأجهزة. أنت تستطيع استخدم إما CSS Flexbox أو CSS Grid للتخطيط. أخيرًا ، يمكنك ذلك استخدام الاستعلامات الإعلامية للاستجابة.

باستخدام CSS Flexbox

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

أيضًا ، قم بتعيين ملف محاذاة العناصر و تبرير المحتوى خصائص لرغبتك.

​​​​​​.card-container {
حشوة: 20مقصف;
عرض: ثني;
التفاف المرن: طَوّق;
محاذاة العناصر: مركز;
تبرير المحتوى: مسافات متساوية;
}

يجب أن تبدو الصفحة كما يلي:

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

ضمن استعلام الوسائط ، حدد العناصر التي ترغب في تغييرها. في هذه الحالة ، ستتغير حاوية البطاقة.

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

@وسائط شاشة و (أقصى عرض:480 بكسل) {
.card-container {
الاتجاه المرن: عمود;
تبرير المحتوى: مركز;
محاذاة العناصر: مركز;
 }
}

لرؤية تأثير استعلام الوسائط ، تحقق من الكود كود.

باستخدام CSS Grid

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

.card-container {
حشوة: 20مقصف;
عرض: شبكة;
شبكة-قالب-أعمدة: يكرر(احتواء تلقائي, الحد الأدنى - الحد الأقصى(300مقصف, 1الاب));
فجوة الشبكة: 20مقصف;
تبرير العناصر: مركز;
}

يجب أن تبدو الصفحة كما يلي:

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

@وسائط شاشة و (أقصى عرض:480 بكسل) {
.card-container {
شبكة-قالب-أعمدة: 1الاب;
تبرير العناصر: مركز;
محاذاة العناصر: مركز;
 }
}

بواسطة الجمع بين شبكة CSS واستعلامات الوسائط، ستلتف البطاقات على شاشات أكبر وتتكدس عموديًا على شاشات أصغر ، مما يحقق تصميم بطاقة سريع الاستجابة. لرؤية تأثير استعلام الوسائط ، تحقق من الكود كود.

اعتبارات إمكانية الوصول لمكونات البطاقة

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

  • لغة HTML الدلالية
  • التنقل باستخدام لوحة المفاتيح
  • أنماط التركيز
  • تسميات ARIA وأدوارها
  • نص بديل
  • هيكل العنوان المناسب
  • تباين اللون

من خلال تنفيذ اعتبارات إمكانية الوصول هذه ، يمكن لمطوري الويب التأكد من أن مكونات البطاقة شاملة.

التخصيص والمزيد من الاستكشاف

يمكنك المضي قدمًا في تخصيص مكون بطاقتك. إليك بعض الأفكار التي يمكنك النظر فيها:

  • الانتقالات والرسوم المتحركة
  • أنماط الصورة
  • مخططات الخلفية والألوان
  • أنماط الحدود
  • عناصر تفاعلية

هناك العديد من الطرق المختلفة التي يمكنك من خلالها تخصيص مكونات بطاقتك ، لذلك لا تتردد في التجربة.

إنشاء مكونات بطاقة جذابة بصريًا وسريعة الاستجابة

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

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