مولّد بطاقات CSS

ما الذي يتضمنه CSS المولّد؟

ينتج الأداة فئة واحدة باسم .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

• background هو اللون الذي اخترته
• border حدود صلبة بسماكة 1 px دائما وباللون الذي اخترته
• border-radius و padding هما القيمتان اللتان اخترتهما بوحدة px
• box-shadow يستخدم إزاحة ثابتة مقدارها 4 px إلى الأسفل مع قيم الضبابية والشفافية التي اخترتها

المعاينة محتوى مؤقت

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

حدود منطقية

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

الدمج مع الترميز الخاص بك

مثال بسيط لصفحتك:

<div class="card">
  <h3>اسم المنتج</h3>
  <p>وصف مختصر</p>
</div>

لا يقيد أسلوب الحاوية ما يوضع بداخلها: فهو يدير الخلفية والحدود والمسافات والظل فقط.