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

Tailwind CSS المرشحات والتحولات: الضبابية، التحجيم، الدوران والنقل

المرشحات

تستخدم أدوات المرشحات خاصية CSS filter لإضافة تأثيرات بصرية على العناصر.

مثال

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">blur</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-0" class="rounded-lg blur-0">
          <p class="text-sm mt-2">blur-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-sm" class="rounded-lg blur-sm">
          <p class="text-sm mt-2">blur-sm</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur" class="rounded-lg blur">
          <p class="text-sm mt-2">blur</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-md" class="rounded-lg blur-md">
          <p class="text-sm mt-2">blur-md</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-lg" class="rounded-lg blur-lg">
          <p class="text-sm mt-2">blur-lg</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="blur-xl" class="rounded-lg blur-xl">
          <p class="text-sm mt-2">blur-xl</p>
        </div>
      </div>
    </div>

    <!-- السطوع -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">brightness</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-50" class="rounded-lg brightness-50">
          <p class="text-sm mt-2">brightness-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-75" class="rounded-lg brightness-75">
          <p class="text-sm mt-2">brightness-75</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-100" class="rounded-lg brightness-100">
          <p class="text-sm mt-2">brightness-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-125" class="rounded-lg brightness-125">
          <p class="text-sm mt-2">brightness-125</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="brightness-150" class="rounded-lg brightness-150">
          <p class="text-sm mt-2">brightness-150</p>
        </div>
      </div>
    </div>

    <!-- التباين -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">contrast</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-50" class="rounded-lg contrast-50">
          <p class="text-sm mt-2">contrast-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-100" class="rounded-lg contrast-100">
          <p class="text-sm mt-2">contrast-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-150" class="rounded-lg contrast-150">
          <p class="text-sm mt-2">contrast-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="contrast-200" class="rounded-lg contrast-200">
          <p class="text-sm mt-2">contrast-200</p>
        </div>
      </div>
    </div>

    <!-- تدرج الرمادي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grayscale</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-0" class="rounded-lg grayscale-0">
          <p class="text-sm mt-2">grayscale-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale" class="rounded-lg grayscale">
          <p class="text-sm mt-2">grayscale</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="grayscale-50" class="rounded-lg grayscale-[50%]">
          <p class="text-sm mt-2">grayscale-50%</p>
        </div>
      </div>
    </div>

    <!-- سيبيا -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">sepia</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia-0" class="rounded-lg sepia-0">
          <p class="text-sm mt-2">sepia-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="sepia" class="rounded-lg sepia">
          <p class="text-sm mt-2">sepia</p>
        </div>
      </div>
    </div>

    <!-- التشبع -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">saturate</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-0" class="rounded-lg saturate-0">
          <p class="text-sm mt-2">saturate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-50" class="rounded-lg saturate-50">
          <p class="text-sm mt-2">saturate-50</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-100" class="rounded-lg saturate-100">
          <p class="text-sm mt-2">saturate-100</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-150" class="rounded-lg saturate-150">
          <p class="text-sm mt-2">saturate-150</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="saturate-200" class="rounded-lg saturate-200">
          <p class="text-sm mt-2">saturate-200</p>
        </div>
      </div>
    </div>

    <!-- تدوير اللون -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hue-rotate</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-0" class="rounded-lg hue-rotate-0">
          <p class="text-sm mt-2">hue-rotate-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-90" class="rounded-lg hue-rotate-90">
          <p class="text-sm mt-2">hue-rotate-90</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="hue-rotate-180" class="rounded-lg hue-rotate-180">
          <p class="text-sm mt-2">hue-rotate-180</p>
        </div>
      </div>
    </div>

    <!-- القلب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">invert</h3>
      <div class="flex flex-wrap gap-4">
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert-0" class="rounded-lg invert-0">
          <p class="text-sm mt-2">invert-0</p>
        </div>
        <div class="text-center">
          <img src="https://picsum.photos/150/150" alt="invert" class="rounded-lg invert">
          <p class="text-sm mt-2">invert</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات المرشحات:

الفئة قيمة CSS الوصف
blur-0 filter: blur(0) بدون ضبابية
blur-sm filter: blur(4px) ضبابية صغيرة
blur filter: blur(8px) ضبابية افتراضية
blur-md filter: blur(12px) ضبابية متوسطة
blur-lg filter: blur(16px) ضبابية كبيرة
blur-xl filter: blur(24px) ضبابية كبيرة جداً
blur-2xl filter: blur(40px) ضبابية كبيرة جداً جداً
blur-3xl filter: blur(64px) ضبابية كبيرة جداً جداً جداً
brightness-0 filter: brightness(0) معتم تماماً
brightness-50 filter: brightness(0.5) سطوع 50%
brightness-100 filter: brightness(1) سطوع 100% (افتراضي)
brightness-150 filter: brightness(1.5) سطوع 150%
contrast-0 filter: contrast(0) بدون تباين
contrast-50 filter: contrast(0.5) تباين 50%
contrast-100 filter: contrast(1) تباين 100% (افتراضي)
contrast-200 filter: contrast(2) تباين 200%
grayscale-0 filter: grayscale(0) بدون تدرج رمادي
grayscale filter: grayscale(100%) تدرج رمادي كامل
sepia-0 filter: sepia(0) بدون سيبيا
sepia filter: sepia(100%) سيبيا كامل
saturate-0 filter: saturate(0) بدون تشبع
saturate-50 filter: saturate(0.5) تشبع 50%
saturate-100 filter: saturate(1) تشبع 100% (افتراضي)
saturate-200 filter: saturate(2) تشبع 200%
hue-rotate-0 filter: hue-rotate(0deg) بدون تدوير لون
hue-rotate-90 filter: hue-rotate(90deg) تدوير لون 90 درجة
hue-rotate-180 filter: hue-rotate(180deg) تدوير لون 180 درجة
invert-0 filter: invert(0) بدون قلب
invert filter: invert(100%) قلب كامل

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص معقدة مثل filter: blur(8px) brightness(1.2) في CSS، بينما يستخدم Tailwind أسماء الفئات مثل blur و brightness-120 لdeclaringها مباشرة.

💡 نصيحة: يمكن دمج المرشحات، مثلاً blur-sm brightness-75 grayscale. لاحظ أن ترتيب المرشحات يؤثر على النتيجة النهائية.

التحولات

تستخدم أدوات التحولات خاصية CSS transform لتحجيم وتدوير ونقل وميل العناصر.

مثال

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">scale</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-50 flex items-center justify-center text-white text-xs">scale-50</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-75 flex items-center justify-center text-white text-xs">scale-75</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-100 flex items-center justify-center text-white text-xs">scale-100</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 flex items-center justify-center text-white text-xs">scale-110</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-125 flex items-center justify-center text-white text-xs">scale-125</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-150 flex items-center justify-center text-white text-xs">scale-150</div>
      </div>
    </div>

    <!-- الدوران -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">rotate</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-0 flex items-center justify-center text-white text-xs">rotate-0</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-3 flex items-center justify-center text-white text-xs">rotate-3</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-6 flex items-center justify-center text-white text-xs">rotate-6</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-12 flex items-center justify-center text-white text-xs">rotate-12</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 flex items-center justify-center text-white text-xs">rotate-45</div>
        <div class="w-24 h-24 bg-green-500 rounded-lg rotate-90 flex items-center justify-center text-white text-xs">rotate-90</div>
      </div>
    </div>

    <!-- النقل -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">translate</h3>
      <div class="relative h-48 bg-gray-100 rounded-lg">
        <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-purple-500 rounded-lg flex items-center justify-center text-white text-xs">المركز</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-400 rounded-lg translate-x-0 translate-y-0 flex items-center justify-center text-white text-xs">الأصل</div>
        <div class="absolute left-4 top-4 w-20 h-20 bg-purple-600 rounded-lg translate-x-8 translate-y-8 flex items-center justify-center text-white text-xs">+8</div>
        <div class="absolute right-4 top-4 w-20 h-20 bg-purple-700 rounded-lg -translate-x-4 translate-y-4 flex items-center justify-center text-white text-xs">-4,+4</div>
      </div>
    </div>

    <!-- الميل -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">skew</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-0 flex items-center justify-center text-white text-xs">skew-x-0</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-3 flex items-center justify-center text-white text-xs">skew-x-3</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-6 flex items-center justify-center text-white text-xs">skew-x-6</div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg skew-x-12 flex items-center justify-center text-white text-xs">skew-x-12</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات التحولات:

الفئة قيمة CSS الوصف
scale-0 transform: scale(0) تحجيم إلى 0
scale-50 transform: scale(0.5) تحجيم إلى 50%
scale-75 transform: scale(0.75) تحجيم إلى 75%
scale-90 transform: scale(0.9) تحجيم إلى 90%
scale-95 transform: scale(0.95) تحجيم إلى 95%
scale-100 transform: scale(1) الحجم الأصلي (افتراضي)
scale-105 transform: scale(1.05) تحجيم إلى 105%
scale-110 transform: scale(1.1) تحجيم إلى 110%
scale-125 transform: scale(1.25) تحجيم إلى 125%
scale-150 transform: scale(1.5) تحجيم إلى 150%
rotate-0 transform: rotate(0deg) بدون دوران
rotate-1 transform: rotate(1deg) دوران 1 درجة
rotate-2 transform: rotate(2deg) دوران 2 درجة
rotate-3 transform: rotate(3deg) دوران 3 درجات
rotate-6 transform: rotate(6deg) دوران 6 درجات
rotate-12 transform: rotate(12deg) دوران 12 درجة
rotate-45 transform: rotate(45deg) دوران 45 درجة
rotate-90 transform: rotate(90deg) دوران 90 درجة
rotate-180 transform: rotate(180deg) دوران 180 درجة
translate-x-0 transform: translateX(0) بدون نقل أفقي
translate-x-1 transform: translateX(0.25rem) نقل أفقي 4px
translate-x-2 transform: translateX(0.5rem) نقل أفقي 8px
translate-x-4 transform: translateX(1rem) نقل أفقي 16px
translate-x-full transform: translateX(100%) نقل أفقي 100%
-translate-x-1/2 transform: translateX(-50%) نقل أفقي -50%
translate-y-0 transform: translateY(0) بدون نقل عمودي
translate-y-1 transform: translateY(0.25rem) نقل عمودي 4px
translate-y-full transform: translateY(100%) نقل عمودي 100%
-translate-y-1/2 transform: translateY(-50%) نقل عمودي -50%
skew-x-0 transform: skewX(0deg) بدون ميل
skew-x-1 transform: skewX(1deg) ميل أفقي 1 درجة
skew-x-3 transform: skewX(3deg) ميل أفقي 3 درجات
skew-x-6 transform: skewX(6deg) ميل أفقي 6 درجات
skew-x-12 transform: skewX(12deg) ميل أفقي 12 درجة
skew-y-0 transform: skewY(0deg) بدون ميل
skew-y-1 transform: skewY(1deg) ميل عمودي 1 درجة
skew-y-3 transform: skewY(3deg) ميل عمودي 3 درجات
skew-y-6 transform: skewY(6deg) ميل عمودي 6 درجات
skew-y-12 transform: skewY(12deg) ميل عمودي 12 درجة

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص معقدة مثل transform: scale(1.1) rotate(3deg) في CSS، بينما يستخدم Tailwind أسماء الفئات مثل scale-110 rotate-3 لdeclaringها مباشرة. القيم السالبة تستخدم صيغة -translate-x-1/2.

💡 نصيحة: دمج -translate-x-1/2 -translate-y-1/2 مع left-1/2 top-1/2 يحقق توسيطاً أفقياً وعمودياً مثالياً.

نقطة أصل التحول (origin-*)

تحدد أدوات origin-* نقطة الأصل للتحولات.

مثال

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-8 items-center justify-center">
        <div class="text-center">
          <div class="w-24 h-24 bg-blue-500 rounded-lg rotate-45 origin-center flex items-center justify-center text-white text-xs">origin-center</div>
          <p class="text-sm mt-2">المركز (افتراضي)</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-green-500 rounded-lg rotate-45 origin-top-left flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-purple-500 rounded-lg rotate-45 origin-top-right flex items-center justify-center text-white text-xs">origin-top</div>
          <p class="text-sm mt-2">origin-top-right</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-orange-500 rounded-lg rotate-45 origin-bottom-left flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-left</p>
        </div>
        <div class="text-center">
          <div class="w-24 h-24 bg-red-500 rounded-lg rotate-45 origin-bottom-right flex items-center justify-center text-white text-xs">origin-bottom</div>
          <p class="text-sm mt-2">origin-bottom-right</p>
        </div>
      </div>
    </div>

    <!-- تطبيق عملي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيق عملي: حركة الدوران</h3>
      <div class="flex gap-8 items-center justify-center">
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-500 rounded-lg hover:rotate-45 origin-center transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            المركز
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-green-500 rounded-lg hover:rotate-45 origin-top-left transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            أعلى اليسار
          </div>
        </div>
        <div class="text-center">
          <div class="w-16 h-16 bg-purple-500 rounded-lg hover:rotate-45 origin-bottom-right transition-transform duration-300 flex items-center justify-center text-white cursor-pointer">
            أسفل اليمين
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات نقطة أصل التحول:

الفئة قيمة CSS الوصف
origin-center transform-origin: center المركز (افتراضي)
origin-top transform-origin: top أعلى الوسط
origin-top-right transform-origin: top right الزاوية العلوية اليمنى
origin-right transform-origin: right يمين الوسط
origin-bottom-right transform-origin: bottom right الزاوية السفلية اليمنى
origin-bottom transform-origin: bottom أسفل الوسط
origin-bottom-left transform-origin: bottom left الزاوية السفلية اليسرى
origin-left transform-origin: left يسار الوسط
origin-top-left transform-origin: top left الزاوية العلوية اليسرى

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعيين خاصية transform-origin في CSS، بينما يستخدم Tailwind أسماء الفئات مثل origin-center و origin-top-left لdeclaringها مباشرة.

💡 نصيحة: نقطة أصل التحول تؤثر على نقطة المرجع للدوران والتحجيم. origin-top-left يجعل العنصر يدور من زاويته العلوية اليسرى، بينما origin-center يدور من المركز.

مرشحات الخلفية (backdrop-*)

تستخدم أدوات backdrop-* خاصية CSS backdrop-filter لتطبيق تأثيرات المرشحات على المحتوى خلف العنصر.

مثال

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">backdrop-blur</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-white/30 backdrop-blur-sm px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-sm</div>
          </div>
          <div class="bg-white/30 backdrop-blur px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur</div>
          </div>
          <div class="bg-white/30 backdrop-blur-md px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-md</div>
          </div>
          <div class="bg-white/30 backdrop-blur-lg px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-lg</div>
          </div>
          <div class="bg-white/30 backdrop-blur-xl px-6 py-3 rounded-lg text-center">
            <div class="font-semibold">blur-xl</div>
          </div>
        </div>
      </div>
    </div>

    <!-- سطوع الخلفية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">backdrop-brightness</h3>
      <div class="relative h-48 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/400/200'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center gap-4">
          <div class="bg-black/30 backdrop-brightness-50 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-50</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-75 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-75</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-100 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-100</div>
          </div>
          <div class="bg-black/30 backdrop-brightness-125 px-6 py-3 rounded-lg text-white text-center">
            <div class="font-semibold">brightness-125</div>
          </div>
        </div>
      </div>
    </div>

    <!-- تطبيق عملي: الزجاج المصنفر -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيق عملي: الزجاج المصنفر</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white/20 backdrop-blur-lg rounded-2xl p-8 text-center shadow-xl">
            <h4 class="text-2xl font-bold text-white mb-2">تأثير الزجاج المصنفر</h4>
            <p class="text-white/80">يتحقق باستخدام backdrop-blur-lg</p>
            <button class="mt-4 bg-white/30 hover:bg-white/50 text-white px-6 py-2 rounded-full transition-colors">
              جرب الآن
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- تطبيق عملي: خلفية النافذة المنبثقة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تطبيق عملي: خلفية النافذة المنبثقة</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <!-- تراكب النافذة المنبثقة -->
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <!-- محتوى النافذة المنبثقة -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white rounded-xl p-6 w-80 shadow-2xl">
            <h4 class="text-xl font-semibold mb-2">نافذة منبثقة</h4>
            <p class="text-gray-600 mb-4">ضبابية الخلفية تتحقق باستخدام backdrop-blur-sm</p>
            <div class="flex justify-end gap-3">
              <button class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded">إلغاء</button>
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">تأكيد</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

الفئة قيمة CSS الوصف
backdrop-blur-0 backdrop-filter: blur(0) بدون ضبابية خلفية
backdrop-blur-sm backdrop-filter: blur(4px) ضبابية خلفية صغيرة
backdrop-blur backdrop-filter: blur(8px) ضبابية خلفية افتراضية
backdrop-blur-md backdrop-filter: blur(12px) ضبابية خلفية متوسطة
backdrop-blur-lg backdrop-filter: blur(16px) ضبابية خلفية كبيرة
backdrop-blur-xl backdrop-filter: blur(24px) ضبابية خلفية كبيرة جداً
backdrop-blur-2xl backdrop-filter: blur(40px) ضبابية خلفية كبيرة جداً جداً
backdrop-blur-3xl backdrop-filter: blur(64px) ضبابية خلفية كبيرة جداً جداً جداً
backdrop-brightness-0 backdrop-filter: brightness(0) خلفية معتمة تماماً
backdrop-brightness-50 backdrop-filter: brightness(0.5) سطوع خلفية 50%
backdrop-brightness-100 backdrop-filter: brightness(1) سطوع خلفية 100%
backdrop-brightness-150 backdrop-filter: brightness(1.5) سطوع خلفية 150%
backdrop-contrast-0 backdrop-filter: contrast(0) بدون تباين خلفية
backdrop-contrast-100 backdrop-filter: contrast(1) تباين خلفية 100%
backdrop-grayscale-0 backdrop-filter: grayscale(0) بدون تدرج رمادي للخلفية
backdrop-grayscale backdrop-filter: grayscale(100%) تدرج رمادي كامل للخلفية
backdrop-hue-rotate-0 backdrop-filter: hue-rotate(0deg) بدون تدوير لون للخلفية
backdrop-hue-rotate-90 backdrop-filter: hue-rotate(90deg) تدوير لون خلفية 90 درجة
backdrop-invert-0 backdrop-filter: invert(0) بدون قلب للخلفية
backdrop-invert backdrop-filter: invert(100%) قلب كامل للخلفية
backdrop-opacity-0 backdrop-filter: opacity(0) خلفية شفافة تماماً
backdrop-opacity-50 backdrop-filter: opacity(0.5) شفافية خلفية 50%
backdrop-opacity-100 backdrop-filter: opacity(1) شفافية خلفية 100%
backdrop-saturate-0 backdrop-filter: saturate(0) بدون تشبع للخلفية
backdrop-saturate-100 backdrop-filter: saturate(1) تشبع خلفية 100%
backdrop-saturate-200 backdrop-filter: saturate(2) تشبع خلفية 200%
backdrop-sepia-0 backdrop-filter: sepia(0) بدون سيبيا للخلفية
backdrop-sepia backdrop-filter: sepia(100%) سيبيا كامل للخلفية

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة خصائص معقدة مثل backdrop-filter: blur(16px) brightness(0.8) في CSS، بينما يستخدم Tailwind أسماء الفئات مثل backdrop-blur-lg backdrop-brightness-75 لdeclaringها مباشرة.

⚠️ ملاحظة: يتطلب backdrop-filter أن يكون للعنصر شفافية في الخلفية حتى يكون التأثير مرئياً. عادةً ما يُدمج مع bg-white/20 أو bg-black/50. تتطلب بعض المتصفحات بادئة -webkit-.

مثال شامل

بجمع جميع المفاهيم أعلاه، إليك مثال كامل على المرشحات والتحولات.

مثال

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-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">معرض الصور (تأثيرات المرشحات)</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=1" alt="الأصلي" class="rounded-lg w-full group-hover:scale-105 transition-transform duration-300">
          <p class="text-sm text-center mt-2">الأصلي</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=2" alt="تدرج رمادي" class="rounded-lg w-full grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">تدرج رمادي -> لون</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=3" alt="سيبيا" class="rounded-lg w-full sepia group-hover:sepia-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">سيبيا -> لون</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=4" alt="ضبابية" class="rounded-lg w-full blur-sm group-hover:blur-0 group-hover:scale-105 transition-all duration-300">
          <p class="text-sm text-center mt-2">ضبابية -> وضوح</p>
        </div>
      </div>
    </div>

    <!-- تأثيرات التمرير على البطاقات -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=5" alt="بطاقة" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">تأثير التحجيم</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">الصورة تتكبر عند التمرير</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=6" alt="بطاقة" class="w-full h-full object-cover group-hover:rotate-3 transition-transform duration-500 origin-center">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">تأثير الدوران</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">الصورة تدور عند التمرير</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=7" alt="بطاقة" class="w-full h-full object-cover group-hover:brightness-125 transition-all duration-500">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-4 left-4 text-white">
            <h4 class="font-semibold">تأثير السطوع</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">السطوع يزداد عند التمرير</p>
        </div>
      </div>
    </div>

    <!-- شريط تنقل بالزجاج المصنفر -->
    <div class="relative h-96 rounded-xl overflow-hidden" style="background-image: url('https://picsum.photos/800/400'); background-size: cover; background-position: center;">
      <!-- شريط التنقل -->
      <nav class="absolute top-0 left-0 right-0 bg-white/10 backdrop-blur-lg border-b border-white/20">
        <div class="flex justify-between items-center px-6 py-4">
          <div class="text-white font-bold text-xl">الشعار</div>
          <div class="flex gap-6">
            <a href="#" class="text-white/80 hover:text-white transition-colors">الرئيسية</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">المنتجات</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">حول</a>
          </div>
        </div>
      </nav>
      <!-- المحتوى -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center text-white">
          <h2 class="text-4xl font-bold mb-4 drop-shadow-lg">تأثير الزجاج المصنفر</h2>
          <p class="text-xl opacity-90 drop-shadow">يتحقق باستخدام backdrop-blur-lg</p>
        </div>
      </div>
    </div>

    <!-- تركيبات التحولات -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">تركيبات التحولات</h3>
      <div class="flex flex-wrap gap-8 items-center justify-center">
        <div class="w-24 h-24 bg-blue-500 rounded-lg scale-110 rotate-6 shadow-lg flex items-center justify-center text-white text-xs">
          تحجيم + دوران
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg scale-90 -rotate-12 shadow-lg flex items-center justify-center text-white text-xs">
          تحجيم + دوران
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg skew-x-6 scale-105 shadow-lg flex items-center justify-center text-white text-xs">
          ميل + تحجيم
        </div>
        <div class="w-24 h-24 bg-orange-500 rounded-lg -skew-x-3 rotate-3 translate-y-2 shadow-lg flex items-center justify-center text-white text-xs">
          مركّب
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

❓ أسئلة شائعة

س ما الفرق بين filter و backdrop-filter؟
ج filter يؤثر على العنصر نفسه ومحتواه. backdrop-filter يؤثر على المحتوى خلف العنصر، ويتطلب أن يكون للعنصر شفافية في الخلفية لرؤية التأثير. يُستخدم عادةً لتأثيرات الزجاج المصنفر.
س هل يمكن دمج عدة تحولات؟
ج نعم. يدعم Tailwind دمج عدة فئات تحول، مثلاً scale-110 rotate-6 translate-x-4. لاحظ أن ترتيب التحولات يؤثر على النتيجة النهائية.
س كيف أحقق حركات تحول سلسة؟
ج استخدم فئات transition-all duration-300 أو transition-transform duration-500. transition-all يحول جميع الخصائص، بينما transition-transform يحول فقط خصائص التحول.
س لماذا لا أرى تأثير backdrop-blur؟
ج يتطلب backdrop-blur أن يكون للعنصر شفافية في الخلفية ليكون مرئياً. تأكد من استخدام خلفية شبه شفافة مثل bg-white/20 أو bg-black/50. تأكد أيضاً من أن متصفحك يدعم خاصية backdrop-filter.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ معرض صور باستخدام grayscale و hover:grayscale-0 لتحقيق تأثير التدرج الرمادي إلى اللون عند التمرير

  2. ⭐⭐ أنشئ مكوّن بطاقة باستخدام hover:scale-105 hover:shadow-xl transition-all لتحقيق تأثير التكبير والظل عند التمرير

  3. ⭐⭐⭐ أنشئ نافذة تسجيل دخول بالزجاج المصنفر باستخدام backdrop-blur-lg bg-white/20 لضبابية الخلفية، مدموجة مع scale-95 hover:scale-100 لحركة التكبير عند التمرير

100%