المرشحات ومرشحات الخلفية

المرشحات ومرشحات الخلفية في Tailwind CSS

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

مرشحات التمويه

تنشئ مرشحات التمويه تأثير تمويه غاوسي. يوفر Tailwind أدوات تمويه من الطفيف إلى الشديد.

<!-- مستويات التمويه القياسية -->
<div class="blur-none">بدون تمويه (افتراضي)</div>
<div class="blur-sm">تمويه صغير (4px)</div>
<div class="blur">تمويه متوسط (8px)</div>
<div class="blur-md">تمويه متوسط كبير (12px)</div>
<div class="blur-lg">تمويه كبير (16px)</div>
<div class="blur-xl">تمويه كبير جداً (24px)</div>
<div class="blur-2xl">تمويه 2XL (40px)</div>
<div class="blur-3xl">تمويه 3XL (64px)</div>

<!-- التمويه عند التمرير -->
<img src="image.jpg"
     class="hover:blur-sm transition-all duration-300"
     alt="يتمويه عند التمرير">

<!-- حالة التحميل/الهيكل -->
<div class="blur-lg animate-pulse bg-gray-200 h-64 w-full rounded-lg">
  جارٍ تحميل المحتوى...
</div>

<!-- تمويه الخصوصية للمحتوى الحساس -->
<div class="relative">
  <img src="sensitive.jpg" class="blur-2xl" alt="محتوى حساس">
  <button class="absolute inset-0 m-auto h-12
                 bg-white text-gray-900 px-6 py-3 rounded-lg">
    انقر للكشف
  </button>
</div>

<!-- تأثير التركيز - تمويه الخلفية على النافذة المنبثقة -->
<div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-md
            flex items-center justify-center">
  <div class="bg-white rounded-xl p-8 max-w-lg">
    محتوى النافذة المنبثقة (الخلفية ممويهة)
  </div>
</div>

<!-- معرض صور مع تمويه عند التمرير -->
<div class="grid grid-cols-3 gap-4">
  <img src="1.jpg" class="hover:blur-0 blur-sm transition-all" alt="1">
  <img src="2.jpg" class="hover:blur-0 blur-sm transition-all" alt="2">
  <img src="3.jpg" class="hover:blur-0 blur-sm transition-all" alt="3">
</div>

مرشحات السطوع

تضبط مرشحات السطوع الإضاءة أو الظلام للعنصر. القيم أقل من 100 تظلم، والقيم أعلى من 100 تضيء.

<!-- مستويات السطوع -->
<div class="brightness-0">أسود تماماً (0%)</div>
<div class="brightness-50">داكن (50%)</div>
<div class="brightness-75">داكن قليلاً (75%)</div>
<div class="brightness-90">خافت قليلاً (90%)</div>
<div class="brightness-95">خافت قليلاً جداً (95%)</div>
<div class="brightness-100">السطوع الطبيعي (100%)</div>
<div class="brightness-105">مشرق قليلاً (105%)</div>
<div class="brightness-110">مشرق (110%)</div>
<div class="brightness-125">مشرق جداً (125%)</div>
<div class="brightness-150">مشرق للغاية (150%)</div>
<div class="brightness-200">أقصى سطوع (200%)</div>

<!-- إضاءة الصورة عند التمرير -->
<div class="overflow-hidden rounded-lg">
  <img src="dark-image.jpg"
       class="brightness-75 hover:brightness-100
              transition-all duration-300"
       alt="تضيء عند التمرير">
</div>

<!-- ضبط صورة الوضع الداكن -->
<img src="photo.jpg"
     class="brightness-100 dark:brightness-90"
     alt="معدلة للوضع الداكن">

<!-- تأثير تمرير الزر -->
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg
              hover:brightness-110 transition-all duration-200">
  مرر فوقي
</button>

<!-- حالة معطلة -->
<button disabled
        class="bg-gray-600 text-white px-6 py-3 rounded-lg
               brightness-50 cursor-not-allowed">
  معطل
</button>

<!-- تراكب صورة مصغرة للفيديو -->
<div class="relative group">
  <img src="thumbnail.jpg"
       class="brightness-75 group-hover:brightness-50
              transition-all duration-300"
       alt="صورة مصغرة للفيديو">
  <div class="absolute inset-0 flex items-center justify-center">
    <button class="bg-white bg-opacity-90 rounded-full p-4
                   opacity-0 group-hover:opacity-100
                   transition-opacity duration-300">
      ▶ تشغيل
    </button>
  </div>
</div>

مرشحات التباين

تضبط مرشحات التباين الفرق بين المناطق الفاتحة والداكنة. القيم الأعلى تزيد التباين، القيم الأقل تقلله.

<!-- مستويات التباين -->
<div class="contrast-0">بدون تباين (رمادي) (0%)</div>
<div class="contrast-50">تباين منخفض (50%)</div>
<div class="contrast-75">تباين مخفض (75%)</div>
<div class="contrast-100">تباين عادي (100%)</div>
<div class="contrast-125">تباين محسّن (125%)</div>
<div class="contrast-150">تباين عالي (150%)</div>
<div class="contrast-200">أقصى تباين (200%)</div>

<!-- مع مرشحات أخرى -->
<img src="photo.jpg"
     class="contrast-125 brightness-110 saturate-150"
     alt="صورة محسّنة">

<!-- تحسين قابلية قراءة النص -->
<div class="bg-cover bg-center relative"
     style="background-image: url('bg.jpg')">
  <div class="absolute inset-0 contrast-50 brightness-75"></div>
  <div class="relative z-10 p-8 text-white">
    <h2>نص قابل للقراءة فوق خلفية مشغولة</h2>
  </div>
</div>

<!-- مرشحات معرض الصور -->
<div class="grid grid-cols-3 gap-4">
  <img src="1.jpg" class="contrast-100" alt="عادي">
  <img src="1.jpg" class="contrast-150" alt="تباين عالي">
  <img src="1.jpg" class="contrast-50" alt="تباين منخفض">
</div>

<!-- تأثير تمرير للصور الدرامية -->
<img src="portrait.jpg"
     class="contrast-100 hover:contrast-125
            transition-all duration-500"
     alt="صورة شخصية مع تأثير تمرير">

مرشحات التدرج الرمادي والسيبيا والألوان

تضبط هذه المرشحات خصائص الألوان، من إزالة اللون تماماً إلى إضافة نغمات عتيقة.

<!-- التدرج الرمادي (يزيل اللون) -->
<div class="grayscale-0">ألوان كاملة (0%)</div>
<div class="grayscale">تدرج رمادي كامل (100%)</div>

<!-- السيبيا (نغمة بنية عتيقة) -->
<div class="sepia-0">بدون سيبيا (0%)</div>
<div class="sepia">سيبيا كاملة (100%)</div>

<!-- عكس الألوان -->
<div class="invert-0">ألوان عادية (0%)</div>
<div class="invert">ألوان معكوسة (100%)</div>

<!-- دوران الصبغة (تحويل اللون) -->
<div class="hue-rotate-0">الصبغة الأصلية (0deg)</div>
<div class="hue-rotate-15">تحويل 15 درجة</div>
<div class="hue-rotate-30">تحويل 30 درجة</div>
<div class="hue-rotate-60">تحويل 60 درجة</div>
<div class="hue-rotate-90">تحويل 90 درجة</div>
<div class="hue-rotate-180">تحويل 180 درجة</div>
<div class="-hue-rotate-60">تحويل -60 درجة</div>

<!-- معرض صور مع خيارات مرشح -->
<div class="space-y-4">
  <img src="photo.jpg" class="w-full" alt="أصلي">
  <img src="photo.jpg" class="w-full grayscale" alt="تدرج رمادي">
  <img src="photo.jpg" class="w-full sepia" alt="سيبيا">
  <img src="photo.jpg" class="w-full hue-rotate-90" alt="صبغة محولة">
</div>

<!-- تأثير تمرير يكشف عن اللون -->
<img src="colorful.jpg"
     class="grayscale hover:grayscale-0
            transition-all duration-500"
     alt="يكشف عن اللون عند التمرير">

<!-- عكس أيقونة الوضع الداكن -->
<img src="logo-dark.svg"
     class="dark:invert"
     alt="شعار (معكوس في الوضع الداكن)">

<!-- دوران صبغة متحرك -->
<div class="animate-spin-slow hue-rotate-0
            hover:hue-rotate-180 transition-all duration-1000">
  <img src="colorful-icon.svg" alt="أيقونة متغيرة الألوان">
</div>

<!-- تأثير صورة عتيقة -->
<img src="modern-photo.jpg"
     class="sepia contrast-125 brightness-110"
     alt="صورة بأسلوب عتيق">

مرشحات التشبع

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

<!-- مستويات التشبع -->
<div class="saturate-0">بدون تشبع (تدرج رمادي) (0%)</div>
<div class="saturate-50">تشبع منخفض (50%)</div>
<div class="saturate-100">تشبع عادي (100%)</div>
<div class="saturate-150">تشبع محسّن (150%)</div>
<div class="saturate-200">أقصى تشبع (200%)</div>

<!-- إنشاء صور حيوية -->
<img src="landscape.jpg"
     class="saturate-150 contrast-110"
     alt="منظر طبيعي حيوي">

<!-- مظهر احترافي مكتوم -->
<img src="portrait.jpg"
     class="saturate-75"
     alt="صورة شخصية احترافية">

<!-- تحسين صورة المنتج -->
<div class="product-gallery">
  <img src="product.jpg"
       class="saturate-125 brightness-105 contrast-105
              hover:saturate-150 transition-all duration-300"
       alt="صورة منتج محسّنة">
</div>

<!-- حالة غير نشطة/معطلة -->
<button disabled
        class="saturate-0 opacity-50 cursor-not-allowed">
  <img src="icon.svg" alt="أيقونة معطلة">
  غير متاح
</button>

<!-- تصفية حسب المزاج -->
<div class="grid grid-cols-3 gap-4">
  <div class="saturate-50 brightness-90">
    <img src="calm.jpg" alt="مزاج هادئ">
  </div>
  <div class="saturate-150 contrast-110">
    <img src="energetic.jpg" alt="مزاج نشيط">
  </div>
  <div class="saturate-0 contrast-125">
    <img src="serious.jpg" alt="مزاج جاد">
  </div>
</div>

مرشحات الظل المسقط

ينشئ الظل المسقط تأثير ظل لشكل العنصر (على عكس box-shadow الذي يظلل الصندوق). مفيد بشكل خاص للعناصر غير المستطيلة مثل الأيقونات أو الأشكال غير المنتظمة.

<!-- مستويات الظل المسقط -->
<div class="drop-shadow-none">بدون ظل</div>
<div class="drop-shadow-sm">ظل صغير</div>
<div class="drop-shadow">ظل متوسط (افتراضي)</div>
<div class="drop-shadow-md">ظل متوسط كبير</div>
<div class="drop-shadow-lg">ظل كبير</div>
<div class="drop-shadow-xl">ظل كبير جداً</div>
<div class="drop-shadow-2xl">ظل 2XL</div>

<!-- ظل مسقط على أيقونات SVG -->
<svg class="w-12 h-12 text-blue-600 drop-shadow-lg">
  <path d="..."></path>
</svg>

<!-- أيقونة مع ارتفاع -->
<button class="p-4 bg-transparent hover:drop-shadow-xl
              transition-all duration-200">
  <svg class="w-8 h-8 text-blue-600">
    <path d="..."></path>
  </svg>
</button>

<!-- نص مع ظل (أفضل من text-shadow للأشكال) -->
<h1 class="text-6xl font-bold text-white drop-shadow-2xl">
  عنوان البطل
</h1>

<!-- تأثير قطع الصورة -->
<img src="transparent-product.png"
     class="drop-shadow-2xl"
     alt="منتج مع ظل">

<!-- تأثير رفع عند التمرير -->
<div class="bg-white rounded-lg p-6
            drop-shadow-md hover:drop-shadow-2xl
            transform hover:-translate-y-1
            transition-all duration-300">
  البطاقة ترتفع عند التمرير
</div>

مرشحات الخلفية

تطبق مرشحات الخلفية التأثيرات على المنطقة خلف العنصر، مما ينشئ تأثيرات الزجاج المصنفر وغيرها من تأثيرات الشفافية. مفيدة للغاية للتراكبات والبطاقات وأشرطة التنقل.

<!-- مستويات تمويه الخلفية -->
<div class="backdrop-blur-none">بدون تمويه خلفية</div>
<div class="backdrop-blur-sm">تمويه خلفية صغير (4px)</div>
<div class="backdrop-blur">تمويه خلفية متوسط (8px)</div>
<div class="backdrop-blur-md">تمويه خلفية متوسط كبير (12px)</div>
<div class="backdrop-blur-lg">تمويه خلفية كبير (16px)</div>
<div class="backdrop-blur-xl">تمويه خلفية كبير جداً (24px)</div>
<div class="backdrop-blur-2xl">تمويه خلفية 2XL (40px)</div>
<div class="backdrop-blur-3xl">تمويه خلفية 3XL (64px)</div>

<!-- بطاقة زجاج مصنفر كلاسيكية -->
<div class="relative h-screen bg-cover bg-center"
     style="background-image: url('background.jpg')">
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg
                rounded-2xl p-8 shadow-2xl border border-white border-opacity-30">
      <h2 class="text-2xl font-bold text-white mb-4">
        بطاقة زجاج مصنفر
      </h2>
      <p class="text-white text-opacity-90">
        المحتوى قابل للقراءة فوق خلفية ممويهة
      </p>
    </div>
  </div>
</div>

<!-- شريط تنقل بأسلوب macOS -->
<nav class="fixed top-0 left-0 right-0 z-50
            bg-white bg-opacity-70 backdrop-blur-md
            border-b border-gray-200 border-opacity-50">
  <div class="container mx-auto px-4 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold">شعار</div>
      <nav class="space-x-6">
        <a href="#">الرئيسية</a>
        <a href="#">حول</a>
        <a href="#">اتصل</a>
      </nav>
    </div>
  </div>
</nav>

<!-- ورقة سفلية بأسلوب iOS -->
<div class="fixed bottom-0 left-0 right-0
            bg-white bg-opacity-80 backdrop-blur-xl
            rounded-t-3xl p-6 shadow-2xl">
  <div class="w-12 h-1 bg-gray-300 rounded-full mx-auto mb-6"></div>
  <h3 class="text-xl font-bold mb-4">عنوان الورقة</h3>
  <p>محتوى الورقة مع خلفية ممويهة</p>
</div>

<!-- سطوع الخلفية -->
<div class="backdrop-brightness-50">يظلم الخلفية</div>
<div class="backdrop-brightness-125">يضيء الخلفية</div>

<!-- تباين الخلفية -->
<div class="backdrop-contrast-125">يزيد تباين الخلفية</div>

<!-- تدرج رمادي للخلفية -->
<div class="backdrop-grayscale">خلفية بتدرج رمادي</div>

<!-- دوران صبغة الخلفية -->
<div class="backdrop-hue-rotate-90">خلفية متحولة الألوان</div>

<!-- عكس الخلفية -->
<div class="backdrop-invert">ألوان خلفية معكوسة</div>

<!-- تشبع الخلفية -->
<div class="backdrop-saturate-150">تشبع خلفية محسّن</div>

<!-- سيبيا الخلفية -->
<div class="backdrop-sepia">نغمة خلفية عتيقة</div>

<!-- شكل زجاجي داكن -->
<div class="bg-black bg-opacity-30 backdrop-blur-xl
            backdrop-saturate-150 backdrop-brightness-125
            border border-white border-opacity-10
            rounded-2xl p-8">
  تأثير زجاج داكن
</div>

<!-- بطاقة زجاج ملون -->
<div class="bg-gradient-to-br from-purple-500 to-pink-500
            bg-opacity-20 backdrop-blur-md backdrop-saturate-200
            rounded-3xl p-6 border border-white border-opacity-20">
  تأثير زجاج حيوي
</div>

<!-- تراكب نافذة منبثقة مع تمويه مظلم -->
<div class="fixed inset-0 z-50
            bg-black bg-opacity-20 backdrop-blur-sm backdrop-brightness-75
            flex items-center justify-center">
  <div class="bg-white rounded-xl p-8 max-w-lg">
    محتوى النافذة المنبثقة
  </div>
</div>

<!-- إشعار منبثق -->
<div class="fixed top-4 right-4
            bg-white bg-opacity-90 backdrop-blur-lg
            rounded-lg p-4 shadow-xl border border-gray-200 border-opacity-50
            max-w-sm">
  <h4 class="font-bold">إشعار</h4>
  <p class="text-sm text-gray-600">تم تنفيذ الإجراء بنجاح</p>
</div>

الجمع بين المرشحات

<!-- مرشحات بأسلوب Instagram -->
<!-- تأثير Clarendon -->
<img src="photo.jpg"
     class="contrast-125 saturate-125 brightness-105"
     alt="مرشح Clarendon">

<!-- تأثير Gingham -->
<img src="photo.jpg"
     class="brightness-105 hue-rotate-350"
     alt="مرشح Gingham">

<!-- تأثير Moon -->
<img src="photo.jpg"
     class="grayscale brightness-110 contrast-110"
     alt="مرشح Moon">

<!-- تأثير Lark -->
<img src="photo.jpg"
     class="contrast-90 saturate-110 brightness-105"
     alt="مرشح Lark">

<!-- تأثير X-Pro II -->
<img src="photo.jpg"
     class="sepia contrast-125 brightness-90"
     alt="مرشح X-Pro II">

الخلاصة

توفر أدوات المرشح في Tailwind تأثيرات بصرية قوية دون صور أو CSS معقد:

• التمويه: تمويه غاوسي من طفيف إلى شديد (blur-{size})
• السطوع: إضاءة أو إظلام العناصر (brightness-{n})
• التباين: ضبط الفرق الفاتح/الداكن (contrast-{n})
• التشبع: التحكم في كثافة اللون (saturate-{n})
• التدرج الرمادي: إزالة اللون تماماً (grayscale)
• السيبيا: إضافة نغمة بنية عتيقة (sepia)
• دوران الصبغة: تحويل الألوان حول العجلة (hue-rotate-{deg})
• العكس: عكس جميع الألوان (invert)
• الظل المسقط: ظل يتبع شكل العنصر (drop-shadow-{size})
• مرشحات الخلفية: جميع المرشحات مطبقة على الخلفية (backdrop-{filter})

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