مكوّن بطاقة باستخدام خصائص CSS المخصصة
أنشئ مكوّن بطاقة مرنًا يعتمد بالكامل على خصائص CSS المخصصة لتسهيل تطبيق السمات.
مكوّن بطاقة باستخدام خصائص CSS المخصصة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
أهداف التصميم
مكون البطاقة حاوية مستقلة بذاتها للمحتوى. وتشمل أهداف التصميم: استخدام مسافات متسقة عبر رموز المسافات، وألوان قابلة لتطبيق السمات باستخدام الرموز البديلة، وتغيير الحجم استجابيًا من دون JavaScript، ودعم الأشكال (elevated وoutlined وflat) عبر الخصائص المخصصة في CSS.
البنية الأساسية للبطاقة
استخدم صنفًا واحدًا .card مع خصائص مخصصة في CSS للقيم القابلة للتهيئة. ترث العناصر الداخلية (header وbody وfooter) من نطاق البطاقة. ويحد ذلك من اختلافات الأنماط بين مثيلات البطاقات في قاعدة الشفرة.
<div class="card">
<h3>Card Title</h3>
<p>Card content styled via custom properties.</p>
</div>
أصناف الأشكال
أعد تعريف الخصائص المخصصة على مستوى البطاقة باستخدام أصناف الأشكال بدلًا من كتابة مجموعات قواعد منفصلة. ولا تحتاج أصناف الأشكال إلا إلى إعادة تعريف المتغيرات التي تغيّرت، إذ ترث الخصائص التي لم تتغير قيمها الأساسية تلقائيًا من دون تكرار.
<div class="card card--elevated">
<p>Elevated variant</p>
</div>
<div class="card card--outlined">
<p>Outlined variant</p>
</div>
تطبيق السمات على البطاقة
عندما يغيّر صنف سمة أحد العناصر الأصلية --color-surface، تحدّث جميع البطاقات داخل تلك السمة خلفياتها تلقائيًا. ولا حاجة إلى كتابة شفرة لتجاوز السمة لكل بطاقة، إذ يتولى نظام الرموز البديلة ذلك بشفافية.
حشو البطاقة المتجاوب
استخدم clamp() مع تجاوزات للخصائص المخصصة لإنشاء حشو مرن: --card-padding: clamp(1rem, 4vw, 2rem). تحصل إطارات العرض الأكبر على حشو أكثر اتساعًا، بينما تحصل إطارات العرض الصغيرة على الحد الأدنى من الحشو، وكل ذلك يُتحكم فيه من خلال تعريف رمز مميز واحد.
تخطيط شبكة البطاقات
تنشئ شبكة البطاقات التي تستخدم CSS Grid مع auto-fill وminmax تخطيطًا ينظم نفسه: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). تملأ البطاقات المساحة المتاحة وتلتف تلقائيًا من دون الحاجة إلى نقاط توقف لاستعلامات الوسائط.
نسبة أبعاد الصورة
حافظ على نسب أبعاد متسقة لصور البطاقات باستخدام aspect-ratio: 16/9 في حاوية الصورة. تملأ الصور الحاوية باستخدام object-fit: cover، ما يضمن توحيد ارتفاعات البطاقات بصرف النظر عن أبعاد الصور المصدر.
الحالات التفاعلية
أضف حالتي hover وfocus-within لرفع البطاقة قليلًا: transform: translateY(-2px) وزيادة box-shadow. نفّذ الحركة باستخدام transition: transform 200ms ease, box-shadow 200ms ease للحصول على استجابة تفاعلية سلسة وملائمة للمركّب الرسومي.
روابط البطاقات سهلة الوصول
اجعل البطاقة بأكملها قابلة للنقر باستخدام رابط ممتد: ضع البطاقة في موضع نسبي، واجعل الرابط الرئيسي في موضع مطلق باستخدام inset: 0. يقرأ قارئو الشاشة نص الرابط، بينما تغطي الطبقة التراكبية البطاقة بصريًا لمستخدمي الفأرة.
حالة التحميل
أضف نسخة .card--loading تستبدل المحتوى بتأثير لمعان هيكلي باستخدام حركة CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) مع تحريكها باستخدام background-size: 200% وanimation: shimmer 1.5s infinite.
البطاقة في الوضع الداكن
في الوضع الداكن، يتغير الرمز المميز --color-surface تلقائيًا من الفاتح إلى الداكن. إذا كانت البطاقات المرتفعة تعتمد على box-shadow لإظهار العمق، وهو ما يختفي على الخلفيات الداكنة، فأضف حدًا خفيفًا أو زد تباين لون السطح لتحسين الإحساس بارتفاع البطاقة في الوضع الداكن.
اختبار المعرفة
كيف تتيح خصائص CSS المخصصة إنشاء نسخ مختلفة من البطاقة من دون تكرار مجموعة القواعد كاملة؟
الملخص
إنشاء مكوّن بطاقة باستخدام خصائص CSS المخصصة ينتج بدائية واجهة مستخدم مرنة وقابلة للتنميط وتدعم النسخ المختلفة. تضبط المتغيرات الأساسية القيم الافتراضية، وتتجاوز فئات النسخ القيم المطلوبة فقط، وتتجاوز فئات السمات القيم على مستوى عام. وبدمج ذلك مع التحجيم المتجاوب، والربط السهل للوصول، وحالات التحميل، يتوسع هذا النمط بسلاسة عبر أنظمة التصميم.
الأسئلة الشائعة
هل درس «مكوّن بطاقة باستخدام خصائص CSS المخصصة» مجاني؟
نعم — نص درس «مكوّن بطاقة باستخدام خصائص CSS المخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «مكوّن بطاقة باستخدام خصائص CSS المخصصة»؟
أنشئ مكوّن بطاقة مرنًا يعتمد بالكامل على خصائص CSS المخصصة لتسهيل تطبيق السمات. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «مكوّن بطاقة باستخدام خصائص CSS المخصصة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مكوّن بطاقة باستخدام خصائص CSS المخصصة
- تنسيق النوافذ المنبثقة ومربعات الحوار
- أنماط القوائم المنسدلة وPopovers
- مكوّن علامات التبويب باستخدام حيلة :checked مقابل JS