Tailwind CSS • المستوى الثالث • الدرس 4

التبديل الشكلي والتحويلات (Transforms, Filters & Backdrop)

أهداف الدرس

تطبيقات التضبيب الضوئي backdrop-blur-* وتأثيرات الفلاتر blur-*.
تدرج الألوان المتقدم بـ bg-gradient-to-* وكبسها داخل النصوص بـ bg-clip-text.
تطبيق التحويلات الهندسية scale-*, rotate-*, و skew-* على العناصر.
دمج via-* لإنشاء تدرجات ثلاثية الألوان.

1. المؤثرات البصرية الفاخرة

تضمن لك كلاسات Filters و Gradients إضافة لمسة احترافية سينمائية للواجهة تجعل مشروعك يبدو كمواقع الشركات التقنية العالمية.

html

<!-- تأثير Glassmorphism -->
<div class="bg-white/10 backdrop-blur-md
            border border-white/20 rounded-3xl">
  محتوى زجاجي شفاف
</div>

<!-- نص بتدرج لوني -->
<h1 class="text-transparent bg-clip-text
           bg-gradient-to-r from-sky-400 to-emerald-400">
  نص متدرج
</h1>

<!-- تحويلات Transform -->
<div class="hover:rotate-45 hover:scale-110
            transition-all duration-500">
  مربع يتحول
</div>

<!-- فلاتر متنوعة -->
<img class="grayscale hover:grayscale-0 transition-all" />

2. مرجع الفلاتر والتحويلات والتدرجات

الفلاتر (Filters)

blur-sm/md/lg — ضباب ضوئي
grayscale — أبيض وأسود
brightness-150 — سطوع
contrast-125 — تباين
saturate-150 — تشبّع الألوان
sepia — تأثير قديم

التحويلات (Transforms)

scale-110 — تكبير 10%
rotate-45 — دوران 45°
skew-y-6 — إمالة رأسية
translate-x-4 — إزاحة أفقية
-translate-y-2 — رفع للأعلى

التدرجات (Gradients)

bg-gradient-to-r — يمن لليسار
bg-gradient-to-br — قطرية
from-sky-400 — لون البداية
via-purple-400 — لون المنتصف
to-emerald-400 — لون النهاية

الزجاج (Backdrop)

backdrop-blur-sm — ضباب خفيف
backdrop-blur-md — متوسط
backdrop-blur-lg — قوي
bg-white/10 — شفافية 10%
border-white/20 — حدود شفافة

3. سرّ تأثير Glassmorphism

التأثير الزجاجي يعتمد على 3 طبقات متكاملة:

1. خلفية شفافة

bg-white/10 أو bg-slate-900/40

2. ضباب خلفي

backdrop-blur-md يضبّب ما خلف العنصر

3. حدود خفيفة

border-white/10 لإبراز الحافة

التطبيق العملي المباشر

تحدي الدرس الرابع: معرض التأثيرات البصرية الشامل

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

أضف via-purple-400 بين from-sky-400 و to-emerald-400 في تدرج العنوان.
غلّف الكل في حاوية <div class="space-y-8 p-6">.
أضف زراً زجاجياً داخل البطاقة الأولى بـ bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20.
أضف شبكة من 4 مربعات توضح الفلاتر: blur-sm, grayscale, brightness-150, contrast-125 saturate-150.
أضف شبكة من 4 مربعات توضح التحويلات: scale-110, rotate-45, -skew-y-6, ومربع بـ hover:rotate-180 hover:scale-125.
أضف عنوانين بنصوص متدرجة جديدة: from-rose-400 to-orange-400 و from-cyan-400 to-blue-600.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للمستوى الرابع