English 中文 العربية 日本語 Português

Tailwind CSS: الظلال والتأثيرات — الظلال، والشفافية، وأنماط

1. الظلال (shadow-*)

تحدد فئات shadow-* خاصية box-shadow للعنصر، وتوفر مجموعة من الأحجام تتراوح من shadow-sm إلى shadow-2xl.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Shadow sizes -->
    <div class="bg-white rounded-lg p-6">
      <h3 class="font-semibold mb-4">Shadow Sizes</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-sm text-center">
          <div class="text-sm font-medium">shadow-sm</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow text-center">
          <div class="text-sm font-medium">shadow</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md text-center">
          <div class="text-sm font-medium">shadow-md</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg text-center">
          <div class="text-sm font-medium">shadow-lg</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-xl text-center">
          <div class="text-sm font-medium">shadow-xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-2xl text-center">
          <div class="text-sm font-medium">shadow-2xl</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-inner text-center">
          <div class="text-sm font-medium">shadow-inner</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-none text-center">
          <div class="text-sm font-medium">shadow-none</div>
        </div>
      </div>
    </div>

    <!-- Shadow colors -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">Shadow Colors</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-blue-500/50 text-center">
          <div class="text-sm font-medium">blue-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-green-500/50 text-center">
          <div class="text-sm font-medium">green-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-purple-500/50 text-center">
          <div class="text-sm font-medium">purple-500/50</div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg shadow-red-500/50 text-center">
          <div class="text-sm font-medium">red-500/50</div>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Card shadow -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h4 class="font-semibold mb-2">Card Shadow</h4>
          <p class="text-gray-600 text-sm">Shadow increases on hover</p>
        </div>
        <!-- Button shadow -->
        <div class="flex items-center justify-center">
          <button class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md hover:shadow-lg hover:bg-blue-700 transition-all">
            Button Shadow
          </button>
        </div>
        <!-- Floating effect -->
        <div class="bg-white rounded-xl shadow-xl p-6 -translate-y-2">
          <h4 class="font-semibold mb-2">Floating Effect</h4>
          <p class="text-gray-600 text-sm">Combined with translate</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
77 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة Shadow:

الفئة قيمة CSS الوصف
shadow-sm ظل صغير تأثير ظل خفيف
shadow الظل الافتراضي تأثير الظل القياسي
shadow-md ظل متوسط ظل متوسط الحجم
shadow-lg ظل كبير تأثير ظل أكبر
shadow-xl ظل كبير جدًا ظل واسع النطاق
shadow-2xl ظل كبير جدًا ظل واسع النطاق جدًا
shadow-inner ظل داخلي ظل العنصر الداخلي
shadow-none بدون ظل إزالة الظل
shadow-blue-500/50 ظل أزرق بنسبة شفافية 50% لون ظل مخصص

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص معقدة مثل box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) في CSS، بينما يستخدم Tailwind أسماء فئات مثل shadow-lg للإعلان المباشر. يدعم shadow-blue-500/50 ألوان الظل والشفافية المخصصة.

نصيحة: يُنشئ shadow-inner تأثير ظل داخلي، وهو مثالي للأزرار الغائرة أو حقول الإدخال. ويُستخدم shadow-none لإزالة الظل الافتراضي.

2. التعتيم (opacity-*)

تحدد فئات opacity-* الشفافية الإجمالية للعنصر.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Opacity Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Opacity gradient -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Opacity Gradient</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-500 opacity-100 rounded flex items-center justify-center text-white text-xs">100</div>
        <div class="w-24 h-24 bg-blue-500 opacity-75 rounded flex items-center justify-center text-white text-xs">75</div>
        <div class="w-24 h-24 bg-blue-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-24 h-24 bg-blue-500 opacity-25 rounded flex items-center justify-center text-white text-xs">25</div>
        <div class="w-24 h-24 bg-blue-500 opacity-0 rounded flex items-center justify-center text-white text-xs">0</div>
      </div>
    </div>

    <!-- More opacity values -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">More Opacity Values</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-20 h-20 bg-green-500 opacity-90 rounded flex items-center justify-center text-white text-xs">90</div>
        <div class="w-20 h-20 bg-green-500 opacity-80 rounded flex items-center justify-center text-white text-xs">80</div>
        <div class="w-20 h-20 bg-green-500 opacity-70 rounded flex items-center justify-center text-white text-xs">70</div>
        <div class="w-20 h-20 bg-green-500 opacity-60 rounded flex items-center justify-center text-white text-xs">60</div>
        <div class="w-20 h-20 bg-green-500 opacity-50 rounded flex items-center justify-center text-white text-xs">50</div>
        <div class="w-20 h-20 bg-green-500 opacity-40 rounded flex items-center justify-center text-white text-xs">40</div>
        <div class="w-20 h-20 bg-green-500 opacity-30 rounded flex items-center justify-center text-white text-xs">30</div>
        <div class="w-20 h-20 bg-green-500 opacity-20 rounded flex items-center justify-center text-white text-xs">20</div>
        <div class="w-20 h-20 bg-green-500 opacity-10 rounded flex items-center justify-center text-white text-xs">10</div>
        <div class="w-20 h-20 bg-green-500 opacity-5 rounded flex items-center justify-center text-white text-xs">5</div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="space-y-4">
        <!-- Disabled state -->
        <div class="flex items-center gap-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded">Normal Button</button>
          <button class="bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed">Disabled Button</button>
        </div>
        <!-- Overlay layer -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center">
            <span class="text-white text-xl font-semibold">Overlay Effect</span>
          </div>
        </div>
        <!-- Fade in/out -->
        <div class="flex gap-4">
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-100 hover:opacity-75 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            Hover me
          </div>
          <div class="w-32 h-32 bg-purple-500 rounded-lg opacity-75 hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center text-white text-sm">
            Hover me
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
61 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة التعتيم:

الفئة قيمة CSS الوصف
opacity-0 opacity: 0 شفافة تمامًا
opacity-5 opacity: 0.05 شفافية 5%
opacity-10 opacity: 0.1 شفافية 10%
opacity-20 opacity: 0.2 شفافية 20%
opacity-25 opacity: 0.25 شفافية 25%
opacity-30 opacity: 0.3 شفافية 30%
opacity-40 opacity: 0.4 شفافية 40%
opacity-50 opacity: 0.5 شفافية 50%
opacity-60 opacity: 0.6 شفافية 60%
opacity-70 opacity: 0.7 شفافية 70%
opacity-75 opacity: 0.75 شفافية 75%
opacity-80 opacity: 0.8 شفافية 80%
opacity-90 opacity: 0.9 شفافية 90%
opacity-95 opacity: 0.95 درجة تعتيم 95%
opacity-100 opacity: 1 معتم تمامًا

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين الخاصية opacity في CSS وتذكر قيم محددة، بينما يستخدم Tailwind أسماء فئات دلالية مثل opacity-50 للإعلان المباشر. وتتراوح قيم التعتيم من 0 إلى 100 بخطوات قدرها 5.

نصيحة: تؤثر opacity على العنصر بأكمله (بما في ذلك المحتوى والعناصر التابعة). إذا كنت تريد أن تكون الخلفية شفافة فقط، فاستخدم صيغة bg-blue-500/50 بدلاً من ذلك.

3. أوضاع المزج (mix-blend-*)

تُستخدم فئات mix-blend-* لتعيين وضع المزج للعنصر، مما يتيح التحكم في كيفية اندماجه مع المحتوى الموجود تحته.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blend Mode Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic blend modes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Basic Blend Modes</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-normal flex items-center justify-center text-white font-bold">normal</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-multiply flex items-center justify-center text-white font-bold">multiply</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-screen flex items-center justify-center text-white font-bold">screen</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-overlay flex items-center justify-center text-white font-bold">overlay</div>
        </div>
      </div>
    </div>

    <!-- More blend modes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">More Blend Modes</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-darken flex items-center justify-center text-white font-bold">darken</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-lighten flex items-center justify-center text-white font-bold">lighten</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-dodge flex items-center justify-center text-white font-bold">color-dodge</div>
        </div>
        <div class="relative h-32 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-blue-500"></div>
          <div class="absolute inset-0 bg-red-500 mix-blend-color-burn flex items-center justify-center text-white font-bold">color-burn</div>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="space-y-4">
        <!-- Image blending -->
        <div class="relative h-48 rounded-lg overflow-hidden">
          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/400/200')"></div>
          <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
          <div class="relative h-full flex items-center justify-center text-white text-2xl font-bold">
            Blend Mode Effect
          </div>
        </div>
        <!-- Text blending -->
        <div class="relative h-24 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-lg overflow-hidden">
          <div class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-overlay">
            TAILWIND
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
72 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة أوضاع المزج:

الفئة قيمة CSS الوصف
mix-blend-normal mix-blend-mode: normal عادي (افتراضي)
mix-blend-multiply mix-blend-mode: multiply الضرب
mix-blend-screen mix-blend-mode: screen الشاشة
mix-blend-overlay mix-blend-mode: overlay تراكب
mix-blend-darken mix-blend-mode: darken تعتيم
mix-blend-lighten mix-blend-mode: lighten تفتيح
mix-blend-color-dodge mix-blend-mode: color-dodge تفتيح اللون
mix-blend-color-burn mix-blend-mode: color-burn حرق الألوان
mix-blend-hard-light mix-blend-mode: hard-light ضوء قوي
mix-blend-soft-light mix-blend-mode: soft-light إضاءة خافتة
mix-blend-difference mix-blend-mode: difference الفرق
mix-blend-exclusion mix-blend-mode: exclusion استبعاد
mix-blend-hue mix-blend-mode: hue Hue
mix-blend-saturation mix-blend-mode: saturation التشبع
mix-blend-color mix-blend-mode: color اللون
mix-blend-luminosity mix-blend-mode: luminosity السطوع

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين الخاصية mix-blend-mode في CSS، بينما يستخدم Tailwind أسماء الفئات مثل mix-blend-multiply للتعريف المباشر. وتُستخدم أوضاع المزج عادةً في التصميم الإبداعي لتراكب الصور وتأثيرات النص وغيرها.

نصيحة: غالبًا ما يُستخدم mix-blend-multiply لتركيب الألوان على الصور للحصول على تأثير ذي درجات لونية عميقة. أما mix-blend-screen فيُستخدم لإنشاء تأثيرات مشرقة ومتألقة.

4. مرشح الظل المسقط (drop-shadow-*)

تستخدم فئات drop-shadow-* CSS filter: drop-shadow() لإضافة ظلال إلى العناصر، وهو ما يُعد خيارًا مثاليًّا للأشكال غير المنتظمة.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drop Shadow Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- drop-shadow sizes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow Sizes</h3>
      <div class="flex flex-wrap gap-8 items-center">
        <div class="text-6xl drop-shadow-sm">🎯</div>
        <div class="text-6xl drop-shadow">🎯</div>
        <div class="text-6xl drop-shadow-md">🎯</div>
        <div class="text-6xl drop-shadow-lg">🎯</div>
        <div class="text-6xl drop-shadow-xl">🎯</div>
        <div class="text-6xl drop-shadow-2xl">🎯</div>
        <div class="text-6xl drop-shadow-none">🎯</div>
      </div>
    </div>

    <!-- drop-shadow vs box-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow vs box-shadow</h3>
      <div class="grid grid-cols-2 gap-8">
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">box-shadow (shadow-lg)</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg">Shadow</div>
        </div>
        <div class="text-center">
          <p class="text-sm text-gray-600 mb-4">drop-shadow (drop-shadow-lg)</p>
          <div class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg drop-shadow-lg">Shadow</div>
        </div>
      </div>
    </div>

    <!-- Practical applications -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Applications</h3>
      <div class="space-y-4">
        <!-- Image shadow -->
        <div class="flex gap-4 items-center">
          <img src="https://picsum.photos/100/100" alt="Example" class="rounded-full drop-shadow-lg">
          <img src="https://picsum.photos/100/100" alt="Example" class="rounded-lg drop-shadow-xl">
        </div>
        <!-- SVG shadow -->
        <div class="flex gap-4 items-center">
          <svg class="w-16 h-16 text-blue-500 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
          <svg class="w-16 h-16 text-green-500 drop-shadow-xl" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"/>
          </svg>
        </div>
        <!-- Text shadow effect -->
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 p-8 rounded-lg">
          <span class="text-4xl font-bold text-white drop-shadow-lg">Text with Shadow</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
58 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة «Drop-shadow»:

الفئة قيمة CSS الوصف
drop-shadow-sm filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) ظل صغير
drop-shadow filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) الظل الافتراضي
drop-shadow-md filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)) ظل متوسط
drop-shadow-lg filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.06)) ظل كبير
drop-shadow-xl filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.1)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.06)) ظل كبير جدًا
drop-shadow-2xl filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) ظل كبير جدًا
drop-shadow-none filter: drop-shadow(0 0 #0000) بدون ظل

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص معقدة مثل filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.1)) في CSS، بينما يستخدم Tailwind أسماء الفئات مثل drop-shadow-lg للإعلان المباشر.

ملاحظة: drop-shadow يتبع قناة ألفا للعنصر، مما يجعله مثاليًّا للأشكال غير المنتظمة (مثل صور PNG وملفات SVG). أما box-shadow فيُنتج ظلًّا مستطيل الشكل، وهو أكثر ملاءمةً للأشكال المنتظمة.

5. مثال شامل

بالجمع بين جميع المفاهيم المذكورة أعلاه، دعونا ننشئ عرضًا توضيحيًّا كاملاً للظلال والتأثيرات.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadows & Effects Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Card grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Basic card -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 relative">
          <div class="absolute inset-0 bg-black opacity-20"></div>
          <div class="absolute bottom-4 left-4">
            <span class="bg-white/90 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">Tag</span>
          </div>
        </div>
        <div class="p-6">
          <h3 class="font-semibold text-lg mb-2">Basic Card</h3>
          <p class="text-gray-600 text-sm">Hover effect using shadow-md and hover:shadow-xl</p>
        </div>
      </div>

      <!-- Gradient card -->
      <div class="bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
        <div class="p-6 text-white">
          <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4 drop-shadow">
            <span class="text-2xl">🎨</span>
          </div>
          <h3 class="font-semibold text-lg mb-2">Gradient Card</h3>
          <p class="opacity-90 text-sm">Gradient background, shadow, and hover animation</p>
        </div>
      </div>

      <!-- Dark card -->
      <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden">
        <div class="p-6 text-white">
          <div class="flex items-center gap-4 mb-4">
            <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500">
            <div>
              <div class="font-semibold">Username</div>
              <div class="text-gray-400 text-sm">@username</div>
            </div>
          </div>
          <p class="text-gray-300 text-sm">Dark theme card with ring-styled avatar border</p>
        </div>
      </div>
    </div>

    <!-- Blend mode banner -->
    <div class="relative h-64 rounded-2xl overflow-hidden">
      <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/300')"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 mix-blend-multiply"></div>
      <div class="relative h-full flex flex-col items-center justify-center text-white text-center px-4">
        <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">Creative Blend Modes</h2>
        <p class="text-xl opacity-90 drop-shadow">Image overlay effect using mix-blend-multiply</p>
      </div>
    </div>

    <!-- Opacity stacking -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Opacity Stacking</h3>
      <div class="relative h-48 bg-gradient-to-r from-gray-100 to-gray-200 rounded-lg overflow-hidden">
        <div class="absolute left-8 top-8 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-100"></div>
        <div class="absolute left-16 top-16 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-75"></div>
        <div class="absolute left-24 top-24 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-50"></div>
        <div class="absolute left-32 top-32 w-32 h-32 bg-blue-500 rounded-lg shadow-lg opacity-25"></div>
      </div>
    </div>

    <!-- Icon shadows -->
    <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl shadow-2xl p-8">
      <div class="flex justify-center gap-8">
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">🏠</div>
          <div class="text-gray-400 text-sm">Home</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">👤</div>
          <div class="text-gray-400 text-sm">User</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">⚙️</div>
          <div class="text-gray-400 text-sm">Settings</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">📊</div>
          <div class="text-gray-400 text-sm">Data</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
85 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

❓ أسئلة شائعة

س ما الفرق بين box-shadow و drop-shadow؟
ج box-shadow (shadow-) تُنشئ ظلًا مستطيلًا، وهو مناسب للأشكال المنتظمة. drop-shadow (drop-shadow-) تتبع قناة ألفا للعنصر، مما يجعلها مثالية للأشكال غير المنتظمة (ملفات PNG و SVG). drop-shadow يتميز بأداء أقل قليلاً.
س كيف يمكنني إنشاء حالة تعطيل لعنصر ما؟
ج استخدم مجموعة opacity-50 cursor-not-allowed. تعمل opacity-50 على جعل العنصر شبه شفاف، بينما تعرض cursor-not-allowed مؤشرًا يشير إلى عدم السماح بالتفاعل. أضف pointer-events-none لتعطيل التفاعل تمامًا.
س هل يؤثر وضع المزج (mix-blend-mode) على العناصر التابعة؟
ج نعم. يؤثر mix-blend-mode على كيفية اندماج العنصر بأكمله وعناصره التابعة مع المحتوى الموجود أسفله. إذا كنت تريد أن يؤثر ذلك على الخلفية فقط، فافصل الخلفية والمحتوى في طبقات مختلفة.
س كيف يمكنني ضبط شفافية لون الظل؟
ج استخدم صيغة shadow-blue-500/50. تعني /50 شفافية بنسبة 50%. يمكنك أيضًا استخدام قيم مثل shadow-blue-500/25 (شفافية بنسبة 25%). لون الظل الافتراضي هو الأسود.

📖 ملخص

📝 تمارين

  1. ⭐ إنشاء مكون بطاقة باستخدام shadow-md وhover:shadow-xl للحصول على تأثير ظل عند تمرير المؤشر فوقها

  2. ⭐⭐ قم بإنشاء معرض صور باستخدام drop-shadow-lg لإضافة ظلال للصور وopacity-* لتطبيق تأثير الظهور التدريجي عند تمرير المؤشر فوق الصورة

  3. ⭐⭐⭐ قم بإنشاء مكون لافتة باستخدام صورة خلفية + mix-blend-multiply تراكب متدرج + drop-shadow-lg ظل نصي للحصول على تأثير بصري احترافي

Web-Tutorial.com

فريق Web-Tutorial التقني

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

100%