الفلاتر والدمج (Filters)
إضافة تأثيرات بصرية احترافية تشبه برامج التصميم للصور والخلفيات.
1. فلاتر الصور (CSS Filters)
تغيير ألوان وخصائص الصور أو العناصر بالكامل (مرر الماوس فوق الصور).
المعاينة
Blur (ضباب)
Grayscale (أبيض وأسود)
Sepia (قديم)
Hue-Rotate (تغيير الألوان)
ملاحظة:
يمكن دمج أكثر من فلتر في نفس الوقت، مثل: filter: blur(2px) grayscale(50%);
2. تأثير الزجاج (Glassmorphism)
خاصية backdrop-filter تقوم بتطبيق الفلتر على ما يوجد "خلف" العنصر الشفاف!
المعاينة
بطاقة زجاجية
(Backdrop Blur)
(Backdrop Blur)
شروط عمل تأثير الزجاج:
- يجب أن تكون خلفية العنصر شفافة جزئياً (مثال:
background: rgba(255,255,255,0.1);). - نضيف الفلتر الخلفي:
backdrop-filter: blur(15px);.