مرشحات CSS: الضبابية، السطوع، التباين والمزيد

مقدمة في مرشحات CSS

تمنحك مرشحات CSS القدرة على تطبيق تأثيرات بصرية على العناصر مباشرة في المتصفح -- تأثيرات كانت تتطلب سابقا برامج تحرير الصور مثل فوتوشوب. باستخدام خاصية filter، يمكنك تضبيب العناصر، وضبط سطوعها وتباينها، وتحويلها إلى تدرج رمادي، وتطبيق درجات السيبيا، وتدوير الألوان، وأكثر من ذلك بكثير. تُطبق هذه التأثيرات وقت التصيير، مما يعني أنها تعمل على أي عنصر: الصور، والنصوص، والخلفيات، ومقاطع الفيديو، وحتى أقسام كاملة من الصفحة.

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

تقبل خاصية filter واحدة أو أكثر من دوال المرشح. تأخذ كل دالة معاملات محددة تتحكم في شدة التأثير. يمكنك ربط عدة دوال مرشح معا في تصريح واحد، ويطبقها المتصفح بالترتيب الذي تحدده -- من اليسار إلى اليمين. هذه القابلية للتركيب هي ما يجعل مرشحات CSS قوية حقا.

/* مرشح واحد */
.element {
    filter: blur(5px);
}

/* مرشحات متعددة مرتبطة معا */
.element {
    filter: blur(2px) brightness(1.2) contrast(1.1);
}

/* إزالة جميع المرشحات */
.element {
    filter: none;
}

مرشح blur()

تطبق دالة blur() ضبابية غاوسية على العنصر. تقبل قيمة طول واحدة تحدد نصف قطر الضبابية -- القيم الأكبر تنتج ضبابية أكثر وضوحا. قيمة 0 تترك العنصر بدون ضبابية. تمتد الضبابية خارج حدود العنصر، لذا قد يبدو المحتوى المجاور وكأنه يتسرب إلى المنطقة الضبابية ما لم تستخدم overflow: hidden على حاوية أب.

/* ضبابية خفيفة -- مثل خارج التركيز قليلا */
.subtle-blur {
    filter: blur(1px);
}

/* ضبابية متوسطة -- خارج التركيز بوضوح */
.medium-blur {
    filter: blur(4px);
}

/* ضبابية قوية -- المحتوى غير قابل للقراءة */
.heavy-blur {
    filter: blur(10px);
}

/* تضبيب صورة خلفية خلف النص */
.hero-background {
    filter: blur(8px);
    transform: scale(1.1); /* منع الحواف البيضاء من فائض الضبابية */
}

/* تضبيب محتوى حساس حتى تفاعل المستخدم */
.spoiler {
    filter: blur(8px);
    cursor: pointer;
    transition: filter 0.3s ease;
}

.spoiler:hover,
.spoiler:focus {
    filter: blur(0);
}

مرشح brightness()

تضبط دالة brightness() مدى سطوع أو عتمة العنصر. تقبل رقما أو نسبة مئوية كمعامل. قيمة 1 (أو 100%) تترك العنصر بدون تغيير. القيم أقل من 1 تعتّم العنصر (مع 0 تنتج نتيجة سوداء تماما)، والقيم أعلى من 1 تسطّعه، مما قد يبيّض الألوان عند القيم العالية جدا.

/* أسود تماما */
.blackout {
    filter: brightness(0);
}

/* أغمق بنسبة 50% من الأصل */
.dimmed {
    filter: brightness(0.5);
}

/* السطوع الأصلي (بدون تغيير) */
.normal {
    filter: brightness(1);
}

/* أسطع بنسبة 30% من الأصل */
.brightened {
    filter: brightness(1.3);
}

/* سطوع مضاعف -- مظهر مبيض */
.overexposed {
    filter: brightness(2);
}

/* تعتيم الصور عند التمرير لسهولة قراءة النص المتراكب */
.card-image {
    transition: filter 0.3s ease;
}

.card:hover .card-image {
    filter: brightness(0.6);
}

مرشح contrast()

تزيد أو تنقص دالة contrast() تباين العنصر. التباين هو الفرق بين الأجزاء الأفتح والأغمق في الصورة. قيمة 1 (أو 100%) بدون تغيير. القيم أقل من 1 تقلل التباين، مما يجعل العنصر يبدو مبيضا ورماديا. القيم أعلى من 1 تزيد التباين، مما يجعل الداكن أغمق والفاتح أفتح.

/* بدون تباين -- رمادي تماما */
.no-contrast {
    filter: contrast(0);
}

/* تباين منخفض -- مظهر مسطح وصامت */
.low-contrast {
    filter: contrast(0.5);
}

/* التباين الأصلي */
.normal {
    filter: contrast(1);
}

/* تباين عالي -- ألوان أكثر حيوية */
.high-contrast {
    filter: contrast(1.5);
}

/* تباين شديد -- شبه مبسّط */
.extreme-contrast {
    filter: contrast(3);
}

/* دمج السطوع والتباين لتحسين الصور */
.enhanced-photo {
    filter: brightness(1.1) contrast(1.2);
}

مرشح grayscale()

تحوّل دالة grayscale() العنصر إلى تدرج رمادي. تقبل قيمة من 0 إلى 1 (أو 0% إلى 100%). قيمة 0 تترك العنصر بألوانه الكاملة، بينما 1 تحوّله إلى تدرج رمادي كامل. القيم الوسيطة تنتج تأثير تشبع جزئي، مما يمكن أن ينشئ لوحات ألوان خافتة ومكتومة.

/* ألوان كاملة (بدون تغيير) */
.full-color {
    filter: grayscale(0);
}

/* تشبع جزئي -- ألوان مكتومة */
.muted {
    filter: grayscale(0.5);
}

/* تدرج رمادي كامل -- أبيض وأسود */
.black-and-white {
    filter: grayscale(1);
}

/* نمط شائع: تدرج رمادي يكشف الألوان عند التمرير */
.partner-logo {
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.partner-logo:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* تدرج رمادي للعناصر المعطلة */
.disabled-section {
    filter: grayscale(1);
    pointer-events: none;
    opacity: 0.6;
}

مرشح sepia()

تطبق دالة sepia() درجة لون دافئة بنية على العنصر، تذكّر بالصور الفوتوغرافية القديمة. تقبل قيمة من 0 إلى 1 (أو 0% إلى 100%). قيمة 0 بدون تغيير، و1 تطبق درجة سيبيا كاملة. هذا المرشح شائع لإنشاء تأثيرات بصرية عتيقة أو حنينية.

/* درجة دافئة خفيفة */
.warm {
    filter: sepia(0.2);
}

/* مظهر عتيق قوي */
.vintage {
    filter: sepia(0.8);
}

/* سيبيا كاملة */
.old-photograph {
    filter: sepia(1);
}

/* دمج السيبيا مع مرشحات أخرى لتأثير عتيق كامل */
.vintage-photo {
    filter: sepia(0.6) contrast(1.1) brightness(0.9);
}

مرشح saturate()

تضبط دالة saturate() تشبع ألوان العنصر. قيمة 1 (أو 100%) تترك الألوان بدون تغيير. القيم أقل من 1 تقلل تشبع الألوان (مع 0 تنتج نتيجة رمادية مطابقة لـ grayscale(1)). القيم أعلى من 1 تزيد تشبع الألوان بشكل مفرط، مما يجعلها أكثر حيوية وكثافة.

/* تشبع منزوع تماما (مثل التدرج الرمادي) */
.desaturated {
    filter: saturate(0);
}

/* ألوان مكتومة قليلا */
.muted-colors {
    filter: saturate(0.7);
}

/* التشبع الأصلي */
.normal {
    filter: saturate(1);
}

/* ألوان حية ونابضة */
.vivid {
    filter: saturate(1.5);
}

/* تشبع شديد -- تأثير نيوني */
.hyper-saturated {
    filter: saturate(3);
}

/* جعل صورة تبرز بزيادة التشبع */
.instagram-vivid {
    filter: saturate(1.4) contrast(1.1) brightness(1.05);
}

مرشح hue-rotate()

تنقل دالة hue-rotate() جميع ألوان العنصر حول عجلة الألوان. تقبل قيمة زاوية (عادة بالدرجات). قيمة 0deg تترك الألوان بدون تغيير، 180deg تنقل جميع الألوان إلى ألوانها المكملة، و360deg تعود إلى الألوان الأصلية. هذا المرشح قوي لإنشاء تنويعات لونية من صورة مصدر واحدة أو للتلوين الديناميكي.

/* بدون تدوير (الألوان الأصلية) */
.original {
    filter: hue-rotate(0deg);
}

/* انزياح دافئ طفيف */
.warm-shift {
    filter: hue-rotate(30deg);
}

/* انزياح إلى الألوان المكملة */
.complementary {
    filter: hue-rotate(180deg);
}

/* دوران كامل (العودة إلى الأصل) */
.full-rotation {
    filter: hue-rotate(360deg);
}

/* توليد تنويعات لونية لنفس الأيقونة */
.icon-red    { filter: hue-rotate(0deg); }
.icon-orange { filter: hue-rotate(30deg); }
.icon-green  { filter: hue-rotate(120deg); }
.icon-blue   { filter: hue-rotate(240deg); }

/* تأثير قوس قزح المتحرك */
@keyframes rainbow {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

.rainbow-text {
    animation: rainbow 5s linear infinite;
}

مرشح invert()

تعكس دالة invert() ألوان العنصر. قيمة 0 تترك العنصر بدون تغيير، و1 (أو 100%) تعكس جميع الألوان تماما -- الأبيض يصبح أسود، والأحمر يصبح سماوي، وهكذا. قيمة 0.5 تنتج نتيجة رمادية محايدة لأنك في منتصف الطريق تماما بين الألوان الأصلية والمعكوسة.

/* بدون عكس */
.normal {
    filter: invert(0);
}

/* عكس كامل */
.inverted {
    filter: invert(1);
}

/* عكس جزئي -- ألوان مكتومة غير معتادة */
.partial-invert {
    filter: invert(0.3);
}

/* حيلة سريعة للوضع الداكن لصفحات بسيطة */
.dark-mode {
    filter: invert(1) hue-rotate(180deg);
}

/* عكس الأيقونات الداكنة للاستخدام على خلفيات داكنة */
.icon-on-dark {
    filter: invert(1);
}

مرشح opacity()

تضبط دالة المرشح opacity() شفافية العنصر. تعمل بشكل مشابه لخاصية opacity في CSS، حيث تقبل قيمة من 0 (شفاف تماما) إلى 1 (معتم تماما). الفرق الرئيسي هو أن مرشح opacity() يمكن دمجه مع دوال مرشح أخرى في تصريح واحد، بينما خاصية opacity هي خاصية مستقلة.

/* استخدام دالة مرشح opacity */
.filter-opacity {
    filter: opacity(0.5);
}

/* استخدام خاصية opacity */
.property-opacity {
    opacity: 0.5;
}

/* الميزة الرئيسية: الدمج مع مرشحات أخرى */
.combined {
    filter: blur(2px) opacity(0.7) grayscale(0.3);
}

/* تأثير تمرير مع انتقال مرشح مدمج */
.image-card {
    filter: opacity(0.8) grayscale(0.5);
    transition: filter 0.3s ease;
}

.image-card:hover {
    filter: opacity(1) grayscale(0);
}

مرشح drop-shadow()

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

/* box-shadow: دائما مستطيل حول صندوق العنصر */
.box-shadow-example {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

/* drop-shadow: يتبع الشكل الفعلي للعنصر */
.drop-shadow-example {
    filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.3));
}

/* الصيغة: drop-shadow(إزاحة-أفقية إزاحة-رأسية نصف-قطر-ضبابية لون) */

/* ظل على صورة PNG شفافة */
.transparent-image {
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

/* ظل على أيقونة SVG */
.svg-icon {
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
}

/* ظل على عنصر مقصوص */
.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* ملاحظة: drop-shadow يتبع شكل clip-path! */

دمج مرشحات متعددة

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

/* الترتيب مهم! هذه تنتج نتائج مختلفة: */

/* تضبيب أولا، ثم إسطاع النتيجة الضبابية */
.blur-then-bright {
    filter: blur(3px) brightness(1.5);
}

/* إسطاع أولا، ثم تضبيب النتيجة المسطعة */
.bright-then-blur {
    filter: brightness(1.5) blur(3px);
}

/* إعدادات مسبقة شبيهة بإنستغرام */
.filter-warm {
    filter: sepia(0.3) saturate(1.4) brightness(1.1) contrast(1.1);
}

.filter-cool {
    filter: saturate(0.8) brightness(1.1) hue-rotate(190deg) contrast(1.1);
}

.filter-dramatic {
    filter: contrast(1.4) brightness(0.9) saturate(1.3);
}

.filter-faded {
    filter: contrast(0.8) brightness(1.1) saturate(0.7) sepia(0.1);
}

.filter-noir {
    filter: grayscale(1) contrast(1.4) brightness(0.9);
}

خاصية backdrop-filter

بينما تطبق خاصية filter التأثيرات على العنصر وجميع محتوياته، تطبق خاصية backdrop-filter التأثيرات فقط على المنطقة خلف العنصر. هذا ينشئ تأثير الزجاج المثلج (أو التصميم الزجاجي) الشائع حيث يكون المحتوى خلف عنصر شبه شفاف ضبابيا بينما يبقى محتوى العنصر نفسه واضحا وقابلا للقراءة. يجب أن يكون للعنصر مستوى من الشفافية (عبر background-color مع قناة ألفا أو opacity) لكي يكون تأثير الخلفية مرئيا.

/* بطاقة زجاج مثلج أساسية */
.glass-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* دعم Safari */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 24px;
}

/* شريط تنقل زجاج مثلج */
.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    z-index: 1000;
}

/* زجاج مثلج داكن */
.dark-glass {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(15px) brightness(0.8);
    -webkit-backdrop-filter: blur(15px) brightness(0.8);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

/* طبقة تراكب للنافذة المنبثقة مع خلفية ضبابية */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

backdrop-filter تقبل جميع دوال المرشح

تقبل خاصية backdrop-filter نفس دوال المرشح مثل filter. يمكنك تضبيب وضبط السطوع وإضافة التباين وتطبيق التدرج الرمادي والمزيد -- كل ذلك على محتوى الخلفية خلف العنصر.

/* تضبيب الخلفية */
.backdrop-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* إسطاع الخلفية */
.backdrop-bright {
    backdrop-filter: brightness(1.5);
    -webkit-backdrop-filter: brightness(1.5);
}

/* تدرج رمادي للخلفية */
.backdrop-gray {
    backdrop-filter: grayscale(1);
    -webkit-backdrop-filter: grayscale(1);
}

/* مدمج: ضبابية + تشبع (زجاج بأسلوب Apple) */
.apple-glass {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
}

/* مدمج: ضبابية + سطوع للطبقات الداكنة */
.dark-overlay {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px) brightness(0.7);
    -webkit-backdrop-filter: blur(12px) brightness(0.7);
}

انتقالات وحركات المرشحات

مرشحات CSS قابلة للتحريك بالكامل، مما يعني أنه يمكنك الانتقال بسلاسة بين حالات مرشح مختلفة باستخدام transition أو تحريكها باستخدام @keyframes. هذا يفتح مجموعة واسعة من التأثيرات التفاعلية، من الكشف عند التمرير إلى حركات التحميل إلى التغييرات البصرية المرتبطة بالتمرير.

/* من تدرج رمادي إلى ألوان عند التمرير */
.portfolio-image {
    filter: grayscale(1) brightness(0.8);
    transition: filter 0.4s ease;
}

.portfolio-image:hover {
    filter: grayscale(0) brightness(1);
}

/* كشف بالضبابية عند التمرير */
.blurred-preview {
    filter: blur(5px) brightness(0.9);
    transition: filter 0.3s ease;
}

.blurred-preview:hover {
    filter: blur(0) brightness(1);
}

/* انتقال مرشحات متعددة */
.photo-card {
    filter: saturate(0.6) contrast(0.9) brightness(0.95);
    transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.photo-card:hover {
    filter: saturate(1.2) contrast(1.05) brightness(1.05);
}

/* حركة نبض متوهج */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 5px rgba(66, 133, 244, 0.3));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 20px rgba(66, 133, 244, 0.6));
    }
}

.glowing-element {
    animation: glowPulse 2s ease-in-out infinite;
}

/* حركة ظهور/اختفاء بالضبابية */
@keyframes blurIn {
    from {
        filter: blur(20px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.blur-entrance {
    animation: blurIn 0.8s ease-out both;
}

/* دورة ألوان باستخدام hue-rotate */
@keyframes colorCycle {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
}

.shifting-colors {
    animation: colorCycle 8s linear infinite;
}

/* تأثير تحميل: موجة سطوع */
@keyframes brightnessWave {
    0%, 100% { filter: brightness(0.6); }
    50%      { filter: brightness(1.2); }
}

.loading-placeholder {
    animation: brightnessWave 1.5s ease-in-out infinite;
}

اعتبارات الأداء

تُصيَّر المرشحات على وحدة معالجة الرسوميات في معظم المتصفحات الحديثة، مما يجعلها عموما ذات أداء جيد. ومع ذلك، يمكن لسيناريوهات معينة أن تسبب مشاكل في الأداء، خاصة على الأجهزة المحمولة أو عند تطبيق المرشحات على مساحات كبيرة من الشاشة.

/* جيد: مرشح على عنصر صغير ثابت الحجم */
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    filter: grayscale(1);
    transition: filter 0.3s ease;
}

.avatar:hover {
    filter: grayscale(0);
}

/* تحذير: مرشح على عنصر كبير بملء الشاشة */
.full-screen-blur {
    filter: blur(20px);
    /* هذا قد يكون مكلفا لأن المتصفح يجب أن يضبب
       كل بكسل من نافذة العرض الكاملة في كل إطار */
}

/* أفضل: استخدم will-change للتلميح بتسريع وحدة الرسوميات */
.animated-filter {
    will-change: filter;
    transition: filter 0.3s ease;
}

/* التنظيف: أزل will-change عند عدم الحاجة */
.animated-filter.idle {
    will-change: auto;
}

/* تجنب: تحريك نصف قطر ضبابية backdrop-filter */
.bad-performance {
    /* لا تحرك قيمة الضبابية نفسها */
    transition: backdrop-filter 0.3s ease; /* مكلف! */
}

/* أفضل: تبديل backdrop-filter مع opacity */
.overlay {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay.visible {
    opacity: 1;
}

مثال عملي: تأثيرات تمرير الصور

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

/* التأثير 1: كشف من تدرج رمادي إلى ألوان */
.gallery-item img {
    filter: grayscale(1);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.gallery-item:hover img {
    filter: grayscale(0);
    transform: scale(1.05);
}

/* التأثير 2: إسطاع مع ظل عند التمرير */
.gallery-item-v2 img {
    filter: brightness(0.85);
    transition: filter 0.3s ease;
}

.gallery-item-v2:hover img {
    filter: brightness(1.1) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

/* التأثير 3: عتيق عند التمرير */
.gallery-item-v3 img {
    transition: filter 0.5s ease;
}

.gallery-item-v3:hover img {
    filter: sepia(0.4) contrast(1.2) brightness(0.9) saturate(1.3);
}

/* التأثير 4: تأثير التركيز -- تضبيب العناصر المجاورة */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.gallery:hover .gallery-item img {
    filter: blur(2px) brightness(0.7);
    transition: filter 0.3s ease;
}

.gallery:hover .gallery-item:hover img {
    filter: blur(0) brightness(1);
}

مثال عملي: بطاقات الزجاج المثلج

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

/* حاوية بخلفية ملونة أو صورة */
.glass-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* بطاقة الزجاج نفسها */
.glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 32px;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.glass-card h3 {
    margin: 0 0 12px;
    font-size: 1.25rem;
}

.glass-card p {
    margin: 0;
    opacity: 0.85;
    line-height: 1.6;
}

/* نوع بطاقة الزجاج: زجاج داكن */
.glass-card-dark {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px) brightness(0.9);
    -webkit-backdrop-filter: blur(16px) brightness(0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

مثال عملي: الوضع الداكن بالمرشحات

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

/* تطبيق عكس + تدوير ألوان لإنشاء تأثير وضع داكن */
.dark-mode-wrapper {
    filter: invert(1) hue-rotate(180deg);
}

/* إرجاع الصور ومقاطع الفيديو إلى ألوانها الأصلية */
.dark-mode-wrapper img,
.dark-mode-wrapper video,
.dark-mode-wrapper svg,
.dark-mode-wrapper [data-no-invert] {
    filter: invert(1) hue-rotate(180deg);
}

/* وضع داكن ألطف: تقليل السطوع بدلا من العكس الكامل */
.soft-dark {
    filter: brightness(0.8) contrast(1.2);
    background-color: #1a1a2e;
}

/* تطبيق الوضع الداكن بناء على تفضيل النظام */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        filter: invert(0.9) hue-rotate(180deg);
    }

    .auto-dark img,
    .auto-dark video {
        filter: invert(1) hue-rotate(180deg);
    }
}

دالة المرشح url()

تشير دالة المرشح url() إلى عنصر مرشح SVG بمعرّفه. هذا يسمح لك بتطبيق تأثيرات مرشح SVG المعقدة -- مثل الاضطراب، وتحويلات مصفوفة الألوان، وخرائط الإزاحة -- باستخدام خاصية filter في CSS. مرشحات SVG أقوى بكثير من دوال مرشح CSS المدمجة ويمكنها إنشاء تأثيرات تكون مستحيلة في CSS النقي.

<!-- تعريف مرشح SVG في HTML -->
<svg style="display: none;">
    <defs>
        <filter id="noise">
            <feTurbulence type="fractalNoise"
                baseFrequency="0.65" numOctaves="3"
                stitchTiles="stitch" />
            <feColorMatrix type="saturate" values="0" />
        </filter>
    </defs>
</svg>

/* الإشارة إلى مرشح SVG من CSS */
.noise-texture {
    filter: url(#noise);
}

/* دمج مرشح SVG مع دوال مرشح CSS */
.combined-effect {
    filter: url(#noise) blur(1px) contrast(1.5);
}

اعتبارات إمكانية الوصول

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

/* ضمان تباين كافٍ عند تعتيم المحتوى */
.dimmed-background {
    filter: brightness(0.4);
}

.dimmed-background .overlay-text {
    /* استخدم نصا عالي التباين على خلفيات معتمة */
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* احترام تفضيلات تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .animated-filter {
        animation: none;
        transition: none;
    }
}

/* توفير مؤشرات تركيز غير متأثرة بالمرشحات */
.filtered-element:focus-visible {
    outline: 3px solid #4A90D9;
    outline-offset: 2px;
    /* outline لا يتأثر بمرشح العنصر */
}

/* تعديلات وضع التباين العالي */
@media (prefers-contrast: high) {
    .muted-image {
        filter: none; /* إزالة المرشحات التي تقلل التباين */
    }
}