EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

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

الظلال (shadow-*)

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الظلال</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">
    <!-- أحجام الظلال -->
    <div class="bg-white rounded-lg p-6">
      <h3 class="font-semibold mb-4">أحجام الظلال</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>

    <!-- ألوان الظلال -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">ألوان الظلال</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>

    <!-- تطبيقات عملية -->
    <div class="bg-gray-200 rounded-lg p-6">
      <h3 class="font-semibold mb-4">تطبيقات عملية</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- ظل البطاقة -->
        <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
          <h4 class="font-semibold mb-2">ظل البطاقة</h4>
          <p class="text-gray-600 text-sm">يزداد الظل عند التمرير</p>
        </div>
        <!-- ظل الزر -->
        <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>
        </div>
        <!-- تأثير الطفو -->
        <div class="bg-white rounded-xl shadow-xl p-6 -translate-y-2">
          <h4 class="font-semibold mb-2">تأثير الطفو</h4>
          <p class="text-gray-600 text-sm">مدمج مع translate</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات الظلال:

الفئة قيمة 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 لإزالة الظل الافتراضي.

الشفافية (opacity-*)

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الشفافية</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">
    <!-- تدرج الشفافية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تدرج الشفافية</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>

    <!-- المزيد من قيم الشفافية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">المزيد من قيم الشفافية</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>

    <!-- تطبيقات عملية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيقات عملية</h3>
      <div class="space-y-4">
        <!-- حالة التعطيل -->
        <div class="flex items-center gap-4">
          <button class="bg-blue-600 text-white px-4 py-2 rounded">زر عادي</button>
          <button class="bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed">زر معطل</button>
        </div>
        <!-- طبقة التراكب -->
        <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">تأثير التراكب</span>
          </div>
        </div>
        <!-- التلاشي -->
        <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">
            مرر فوقي
          </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">
            مرر فوقي
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

الفئة قيمة 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 بدلاً من ذلك.

أنماط الدمج (mix-blend-*)

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض أنماط الدمج</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">
    <!-- أنماط الدمج الأساسية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أنماط الدمج الأساسية</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>

    <!-- المزيد من أنماط الدمج -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">المزيد من أنماط الدمج</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>

    <!-- تطبيقات عملية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيقات عملية</h3>
      <div class="space-y-4">
        <!-- دمج الصور -->
        <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">
            تأثير نمط الدمج
          </div>
        </div>
        <!-- دمج النص -->
        <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>
▶ جرّب الكود

مرجع فئات أنماط الدمج:

الفئة قيمة 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 درجة اللون
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 لإنشاء تأثيرات مضيئة ولامعة.

فلتر الظل المنسدل (drop-shadow-*)

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الظل المنسدل</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 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أحجام drop-shadow</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 مقابل box-shadow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">drop-shadow مقابل 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">ظل</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">ظل</div>
        </div>
      </div>
    </div>

    <!-- تطبيقات عملية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيقات عملية</h3>
      <div class="space-y-4">
        <!-- ظل الصور -->
        <div class="flex gap-4 items-center">
          <img src="https://picsum.photos/100/100" alt="مثال" class="rounded-full drop-shadow-lg">
          <img src="https://picsum.photos/100/100" alt="مثال" class="rounded-lg drop-shadow-xl">
        </div>
        <!-- ظل SVG -->
        <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>
        <!-- تأثير ظل النص -->
        <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">نص بظل</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات 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 ظلاً مستطيلاً، وهو أكثر ملاءمة للأشكال المنتظمة.

مثال شامل

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال شامل للظلال والتأثيرات</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">
    <!-- شبكة البطاقات -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- بطاقة أساسية -->
      <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">وسم</span>
          </div>
        </div>
        <div class="p-6">
          <h3 class="font-semibold text-lg mb-2">بطاقة أساسية</h3>
          <p class="text-gray-600 text-sm">تأثير التمرير باستخدام shadow-md و hover:shadow-xl</p>
        </div>
      </div>

      <!-- بطاقة متدرجة -->
      <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">بطاقة متدرجة</h3>
          <p class="opacity-90 text-sm">خلفية متدرجة وظل وتحريك عند التمرير</p>
        </div>
      </div>

      <!-- بطاقة داكنة -->
      <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="الصورة الرمزية" class="w-12 h-12 rounded-full ring-2 ring-purple-500">
            <div>
              <div class="font-semibold">اسم المستخدم</div>
              <div class="text-gray-400 text-sm">@username</div>
            </div>
          </div>
          <p class="text-gray-300 text-sm">بطاقة بسم داكن مع حدود الصورة الرمزية بنمط ring</p>
        </div>
      </div>
    </div>

    <!-- لافتة أنماط الدمج -->
    <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">أنماط دمج إبداعية</h2>
        <p class="text-xl opacity-90 drop-shadow">تأثير تراكب الصور باستخدام mix-blend-multiply</p>
      </div>
    </div>

    <!-- تراكم الشفافية -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">تراكم الشفافية</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>

    <!-- ظلال الأيقونات -->
    <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">الرئيسية</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">👤</div>
          <div class="text-gray-400 text-sm">المستخدم</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">⚙️</div>
          <div class="text-gray-400 text-sm">الإعدادات</div>
        </div>
        <div class="text-center">
          <div class="text-5xl drop-shadow-lg mb-2">📊</div>
          <div class="text-gray-400 text-sm">البيانات</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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 للحصول على تأثير بصري احترافي

100%