**filter:** يُطبّق مؤثرات بصرية على العنصر نفسه وأبناءه: - `blur(px)` — ضبابية - `brightness(%)` — سطوع (100% = طبيعي) - `contrast(%)` — تباين - `grayscale(%)` — تحويل للتدرج الرمادي - `hue-rotate(deg)` — دوران درجة اللون - `saturate(%)` — تشبع اللون - `sepia(%)` — تأثير البُني القديم - `drop-shadow(x y blur color)` — ظل دقيق (مختلف عن box-shadow) - `invert(%)` — عكس الألوان
يمكن دمج عدة فلاتر: `filter: brightness(0.8) contrast(1.2);`
**backdrop-filter:** يُطبّق مؤثرات بصرية على ما **خلف** العنصر (ليس العنصر نفسه). يُستخدم لتأثير Frosted Glass (الزجاج المصنفر).
يشترط: خلفية شبه شفافة على العنصر.
| 1 | /* Frosted Glass */ |
| 2 | .glass-card { |
| 3 | background: rgba(255, 255, 255, 0.15); |
| 4 | backdrop-filter: blur(16px) saturate(180%); |
| 5 | -webkit-backdrop-filter: blur(16px) saturate(180%); |
| 6 | border: 1px solid rgba(255,255,255,0.2); |
| 7 | } |
| 8 | |
| 9 | /* تعتيم عند hover */ |
| 10 | .dark-img img:hover { filter: brightness(0.7) contrast(1.1); } |
مثال 1: بطاقة Frosted Glass
| 1 | .glass-ui { |
| 2 | background: linear-gradient(135deg, #667eea, #764ba2); |
| 3 | min-height: 400px; |
| 4 | display: flex; |
| 5 | align-items: center; |
| 6 | justify-content: center; |
| 7 | } |
| 8 | |
| 9 | .glass-card { |
| 10 | background: rgba(255,255,255,0.15); |
| 11 | backdrop-filter: blur(20px) saturate(200%); |
| 12 | -webkit-backdrop-filter: blur(20px) saturate(200%); |
| 13 | border: 1px solid rgba(255,255,255,0.3); |
| 14 | border-radius: 20px; |
| 15 | padding: 32px; |
| 16 | box-shadow: 0 8px 32px rgba(0,0,0,0.2); |
| 17 | color: white; |
| 18 | } |