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

Tailwind CSS: مرشحات وتحويلات Tailwind CSS

1. المرشحات

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filter 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">
    <!-- blur -->
    <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>

    <!-- brightness -->
    <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>

    <!-- contrast -->
    <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>

    <!-- grayscale -->
    <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>

    <!-- sepia -->
    <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>

    <!-- saturate -->
    <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>

    <!-- hue-rotate -->
    <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>

    <!-- invert -->
    <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>
173 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة قيمة 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 لإعلانها مباشرةً.

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

2. التحويلات

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform 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">
    <!-- scale -->
    <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>

    <!-- rotate -->
    <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>

    <!-- translate -->
    <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">Center</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">Origin</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>

    <!-- skew -->
    <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>
53 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة Transform:

الفئة قيمة 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) تدوير بمقدار درجتين
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) ترجمة أفقية بمقدار 4 بكسل
translate-x-2 transform: translateX(0.5rem) ترجمة أفقية بمقدار 8 بكسل
translate-x-4 transform: translateX(1rem) ترجمة أفقية بمقدار 16 بكسل
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) ترجمة عموديًا بمقدار 4 بكسل
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 لإعلانها مباشرةً. أما القيم السالبة فتستخدم صيغة -translate-x-1/2.

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

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

تُستخدم أدوات origin-* لتحديد نقطة الأصل للتحويلات.

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform Origin 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">
    <!-- Origin positions -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Transform Origin</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">center (default)</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>

    <!-- Practical application -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application: Rotation Animation</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">
            Center
          </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">
            Top-left
          </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">
            Bottom-right
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
58 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة «TransformOrigin»:

الفئة قيمة 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 لإعلانها مباشرةً.

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

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

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backdrop Filter 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">
    <!-- backdrop-blur -->
    <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>

    <!-- backdrop-brightness -->
    <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>

    <!-- Practical Application: Frosted Glass -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application: Frosted Glass</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">Frosted Glass Effect</h4>
            <p class="text-white/80">Achieved with 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">
              Try Now
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Practical Application: Modal Backdrop -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical Application: Modal Backdrop</h3>
      <div class="relative h-64 rounded-lg overflow-hidden" style="background-image: url('https://picsum.photos/600/300'); background-size: cover;">
        <!-- Modal overlay -->
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <!-- Modal content -->
        <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">Modal</h4>
            <p class="text-gray-600 mb-4">Background blur achieved with 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">Cancel</button>
              <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Confirm</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
84 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة قيمة 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 لإعلانها مباشرةً.

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

5. مثال شامل

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Filters & Transforms 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">
    <!-- Image Gallery -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Image Gallery (Filter Effects)</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="Original" class="rounded-lg w-full group-hover:scale-105 transition-transform duration-300">
          <p class="text-sm text-center mt-2">Original</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=2" alt="Grayscale" 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">Grayscale -> Color</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=3" alt="Sepia" 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">Sepia -> Color</p>
        </div>
        <div class="group cursor-pointer">
          <img src="https://picsum.photos/200/200?random=4" alt="Blur" 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">Blur -> Clear</p>
        </div>
      </div>
    </div>

    <!-- Card Hover Effects -->
    <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="Card" 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">Scale Effect</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Image zooms on hover</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="Card" 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">Rotation Effect</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Image rotates on hover</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="Card" 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">Brightness Effect</h4>
          </div>
        </div>
        <div class="p-4">
          <p class="text-gray-600 text-sm">Brightness increases on hover</p>
        </div>
      </div>
    </div>

    <!-- Frosted Glass Navbar -->
    <div class="relative h-96 rounded-xl overflow-hidden" style="background-image: url('https://picsum.photos/800/400'); background-size: cover; background-position: center;">
      <!-- Navbar -->
      <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">Logo</div>
          <div class="flex gap-6">
            <a href="#" class="text-white/80 hover:text-white transition-colors">Home</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">Products</a>
            <a href="#" class="text-white/80 hover:text-white transition-colors">About</a>
          </div>
        </div>
      </nav>
      <!-- Content -->
      <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">Frosted Glass Effect</h2>
          <p class="text-xl opacity-90 drop-shadow">Achieved with backdrop-blur-lg</p>
        </div>
      </div>
    </div>

    <!-- Transform Combinations -->
    <div class="bg-white rounded-xl shadow-lg p-6">
      <h3 class="font-semibold mb-4">Transform Combinations</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">
          scale + rotate
        </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">
          scale + rotate
        </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">
          skew + scale
        </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">
          Combined
        </div>
      </div>
    </div>
  </div>
</body>
</html>
107 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة كود CSS مكثف لتحقيق تأثيرات التمرير فوق صور معرض الصور، وأشرطة التنقل ذات المظهر الزجاجي المصنفر، وتركيبات التحويلات، في حين يستخدم Tailwind فئات المساعدة «filter» و«transform» لإنجاز كل ذلك مباشرةً في 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 لإنشاء حركة تكبير عند تمرير المؤشر

Web-Tutorial.com

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

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

100%