NahdaAIنهضة
Tailwind CSS • المستوى الأول • الدرس 3

الحدود والحواف والظلال (Borders, Rounded & Shadows)

العودة لفهرس المستوى

أهداف الدرس

  • رسم وتحديد الإطارات الخارجية بكلاسات border وتلوينها مع الشفافية (border-sky-500/50).
  • تطبيق الحواف الدائرية rounded-xl و rounded-full.
  • إضافة تأثيرات العمق والظلال shadow-md, shadow-lg, shadow-2xl.
  • تركيب التخطيطات بـ grid و gap-6 لبناء شبكات متجاوبة.

1. إضافة العمق والحدود العصرية

تساعد كلاسات rounded و shadow في فصل المكونات بصرياً وإعطاء الواجهة لمسة جمالية حديثة تجذب عيون المستخدمين.

html
<!-- إطار بسيط -->
<div class="border border-slate-700">...</div>

<!-- إطار سميك مع شفافية اللون -->
<div class="border-2 border-sky-500/50">...</div>

<!-- حواف دائرية بأشكال مختلفة -->
<div class="rounded-lg">...</div>       <!-- 8px -->
<div class="rounded-2xl">...</div>      <!-- 16px -->
<div class="rounded-3xl">...</div>      <!-- 24px -->
<div class="rounded-full">...</div>     <!-- شكل بيضاوي -->

<!-- الظلال -->
<div class="shadow-md">...</div>
<div class="shadow-xl">...</div>
<div class="shadow-2xl">...</div>

2. مرجع الحواف والظلال

الحواف (Rounded)
  • rounded-sm — 2px
  • rounded-md — 6px
  • rounded-xl — 12px
  • rounded-3xl — 24px
  • rounded-full — شكل بيضاوي كامل
الحدود (Border)
  • border — 1px
  • border-2 — 2px
  • border-4 — 4px
  • border-sky-500/50 — سماوي بشفافية 50%
الظلال (Shadow)
  • shadow-sm — خفيف
  • shadow-md — متوسط
  • shadow-xl — قوي
  • shadow-2xl — عميق جداً
الشبكة (Grid)
  • grid — تشغيل Grid
  • grid-cols-2 — عمودان
  • gap-6 — مسافة بين الأعمدة
  • md:grid-cols-2 — متجاوب

3. قوة الشفافية في الألوان

bg-sky-500
bg-sky-500/50
bg-sky-500/20

الشفافية تُضاف بعد اسم اللون بـ / ورقم من 0 إلى 100. مثلاً: bg-sky-500/50 = سماوي بشفافية 50%.

التطبيق العملي المباشر

تحدي الدرس الثالث: بناء شبكة بطاقات احترافية

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

  1. غيّر حشوة الشارة من px-3 إلى px-4 (لزيادة الاتساع).
  2. غلّف البطاقة الأصلية داخل شبكة <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">.
  3. أضف بطاقة ثانية بحواف دائرية كاملة: rounded-full مع خلفية bg-slate-800.
  4. أضف للبطاقة الثانية تخطيط flex items-center justify-center وحشوة px-6 py-4.
  5. أضف لها ظلاً shadow-lg وإطاراً border border-slate-700.
  6. غيّر نص الشارة في البطاقة الأولى إلى مميزة (مختصر).
⏳ جارٍ تحميل المحرر التفاعلي...
الدرس السابقالانتقال للدرس الرابع