99. CSS الحديث: Filter و Backdrop Filter والأشكال

تسمح الميزات المتقدمة للمصممين بتحقيق تأثيرات كانت تتطلب سابقاً محررات صور أو JavaScript.

1. filter (معالجة الصور)

يطبق تأثيرات رسومية على عنصر (مثل الصور، divs) باستخدام دوال مثل blur() و grayscale() و sepia() و drop-shadow().

css /* تأثير التدرج الرمادي على صورة حتى يتم تمرير الماوس */ img { filter: grayscale(100%); transition: filter 0.5s; }

img:hover { filter: grayscale(0%); /* لون كامل عند تمرير الماوس */ filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); }

2. backdrop-filter (تأثيرات الطبقات)

يطبق تأثيرات على المنطقة خلف العنصر. هذا يشتهر بإنشاء تأثير glassmorphism (الزجاج المتجمد) الخاص بـ macOS/iOS.

css .frosted-nav { background-color: rgba(255, 255, 255, 0.5); /* يغشى كل شيء خلف عنصر التنقل */ backdrop-filter: blur(10px); }

3. clip-path (أشكال مخصصة)

يسمح لك بقص عنصر إلى شكل معقد (دائرة، مضلع، إلخ)، مما يحرر العناصر من صندوق المستطيل القياسي.

css .diamond-shape { width: 200px; height: 200px; background: purple; /* يحدد الشكل باستخدام إحداثيات X/Y */ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }