كيفية عمل مرشحات CSS: كل وظيفة تصفية، ولماذا يهم الطلب، وأخطاء التخطيط التي تسببها

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

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

ليرة تركية؛DR: Css filter تطبق الخاصية تأثيرات رسومية مثل التمويه، والسطوع، والتباين، والتدرج الرمادي، والبني الداكن، والتشبع، والعكس، وتدوير اللون، والعتامة على العنصر وكل شيء بداخله، بترتيب كتابة الوظائف. أي قيمة أخرى غير none يقوم أيضًا بإنشاء سياق تكديس ويصبح الكتلة المحتوية للأطفال الثابتين والموضعين بشكل مطلق، وهو السبب المعتاد لـ &quot؛ مشروطي عالق داخل البطاقة والاقتباس؛. يقوم مولد مرشح Toolz CSS بإنشاء الإعلان باستخدام أشرطة التمرير والمعاينة المباشرة، ويكتب فقط الوظائف التي قمت بتغييرها، ويعمل من جانب العميل مجانًا وبدون تسجيل.

ما هي خاصية تصفية CSS؟

تطبق خاصية مرشح CSS تأثيرات معالجة الصور على عنصر ما قبل رسمه على الصفحة. يغطي التأثير العرض الكامل للعنصر &#39؛: خلفيته وحدوده ونصه وصوره وعناصره الفرعية. تم تعريفه في W3C وحدة تأثيرات التصفية المستوى 1 ومدعوم في جميع المتصفحات الحالية؛ ال مرجع MDN للمرشح يسرد تفاصيل التوافق.

الإعلان عبارة عن قائمة مفصولة بمسافات لوظائف التصفية

img.hero {
  filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
}

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

لا تقوم عوامل التصفية بتعديل ملف الصورة. يطبقها المتصفح في كل مرة يرسم فيها، بحيث يظل الأصل دون تغيير ويمكنك تغيير التأثير أو إزالته بسطر واحد من CSS.

ماذا تفعل كل وظيفة مرشح؟

كل وظيفة لها قيمة هوية تترك العنصر دون تغيير. يستخدم مولد Toolz ذلك لإبقاء الإخراج قصيرًا: يتم حذف أي وظيفة متبقية عند قيمة الهوية الخاصة بها من CSS.

وظيفة	ماذا يفعل	هوية	نطاق منزلق المولد
blur()	طمس غاوسي مع نصف القطر المحدد	0px	من 0 إلى 20 بكسل
brightness()	يضاعف كل قناة لون	100%	0 إلى 200%
contrast()	يدفع القنوات بعيدًا عن أو نحو اللون الرمادي المتوسط	100%	0 إلى 200%
saturate()	يزيد أو يقلل من كثافة اللون	100%	0 إلى 200%
grayscale()	يمتزج نحو اللون الرمادي ذي النصوع المتساوي	0%	0 إلى 100%
sepia()	يمتزج مع اللون البني الدافئ	0%	0 إلى 100%
invert()	يقلب كل قناة نحو عكسها	0%	0 إلى 100%
hue-rotate()	يدور الألوان حول عجلة الألوان	0deg	من 0 إلى 360 درجة
opacity()	يجعل العنصر أكثر شفافية	100%	0 إلى 100%

تسمح المواصفات بقيم تتجاوز بعض هذه النطاقات، مثل brightness(300%). تغطي أشرطة التمرير النطاقات المفيدة لتعديلات نمط الصورة؛ يمكنك كتابة قيمة أكبر في CSS الخاص بك يدويًا.

تحدد المواصفات أيضًا drop-shadow()، والتي لا يتضمنها المولد. على عكس box-shadow، drop-shadow() يتبع الشكل المرئي للصور الشفافة مثل أيقونات PNG، بدلاً من المربع المستطيل &#39؛s. للظلال المستطيلة، دليل الظل المربع يغطي خاصية أكثر مرونة.

كيف تغير مرشحات الألوان قيم البكسل؟

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

السطوع (150%) يضرب كل قناة في 1.5. يصبح اللون الرمادي المتوسط لـ rgb (100، 100، 100) rgb (150، 150، 150). يتم قص القيم التي قد تتجاوز 255، ولهذا السبب يؤدي السطوع العالي إلى تحويل النقاط البارزة إلى اللون الأبيض النقي.

التباين (200%) ينطبق (القيمة - 0.5) × 2 + 0.5 على كل قناة. يصبح اللون الرمادي الداكن عند 0.25 (حوالي 64) (0.25 - 0.5) × 2 + 0.5 = 0، أسود. الرمادي الفاتح عند 0.75 يصبح 1.0، أبيض. كل شيء ينتشر بعيدا عن المنتصف.

تدرج رمادي (100%) يستبدل كل بكسل باللون الرمادي بناءً على النصوع، باستخدام أوزان 0.2126 للأحمر، و0.7152 للأخضر، و0.0722 للأزرق. الأحمر النقي، rgb (255، 0، 0)، يصبح 0.2126 × 255 = حوالي 54، لذا rgb (54، 54، 54). يصبح اللون الأخضر النقي رماديًا أفتح بكثير يبلغ حوالي 182. ولهذا السبب يحافظ تحويل التدرج الرمادي على الإحساس بأن اللون الأخضر أكثر سطوعًا من اللون الأحمر.

بني داكن (100%) يمزج القنوات مع المعاملات الموزونة الدافئة. بالنسبة للإخراج الأحمر، تكون الصيغة 0.393R + 0.769G + 0.189B. يدخل الأبيض على شكل (1، 1، 1) ويخرج تقريبًا (1.35، 1.20، 0.94)، والذي يتم تثبيته على rgb (255، 255، 239): يصبح الأبيض كريمًا باهتًا.

تأتي هذه الأرقام من تطبيق صيغ المواصفات &#39؛ مباشرة. على الشاشة، يمكن للتقريب وإدارة الألوان تحريك النتيجة بوحدة أو وحدتين.

لماذا يغير ترتيب وظائف التصفية النتيجة؟

يتم تطبيق المرشحات بالتسلسل، بحيث تعمل كل وظيفة على إخراج الوظيفة السابقة &#39؛s. عندما تقوم إحدى الوظائف بإزالة المعلومات، مثل إزالة اللون بتدرج رمادي، فإن أي شيء يتم تشغيله بعد ذلك يكون لديه قدر أقل من العمل معه.

خذ اللون الأزرق النقي، rgb(0، 0، 255)، ثم ضع التدرج الرمادي والبني الداكن بنسبة 100% في كلا الأمرين.

filter: grayscale(100%) sepia(100%);

1. التدرج الرمادي أولاً: اللون الأزرق له نصوع 0.0722، وبالتالي يصبح البكسل رماديًا داكنًا يبلغ 0.0722 على كل قناة، حوالي rgb (18، 18، 18).
2. بني داكن ثانيًا: الأحمر يصبح 0.0722 × (0.393 + 0.769 + 0.189) = 0.0975، الأخضر يصبح 0.0722 × 1.203 = 0.0869، الأزرق يصبح 0.0722 × 0.937 = 0.0677.
3. النتيجة: حوالي rgb(25، 22، 17)، بني دافئ داكن جدًا.

filter: sepia(100%) grayscale(100%);

1. بني داكن أولاً: الأحمر يصبح 0.189، الأخضر 0.168، الأزرق 0.131، البني الداكن.
2. التدرج الرمادي الثاني: النصوع هو 0.2126 × 0.189 + 0.7152 × 0.168 + 0.0722 × 0.131 = 0.170.
3. النتيجة: حوالي rgb(43، 43، 43)، رمادي محايد بدون صبغة على الإطلاق.

نفس الوظيفتين، ترتيب مختلف، والنتيجة واحدة يتم تنغيمها بينما الأخرى ليست كذلك. القاعدة العامة: ضع وظائف إزالة الألوان أولاً إذا كنت تريد وظيفة لاحقة لتلوين النتيجة، وأخيرًا إذا كنت تريد صورة نهائية محايدة.

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

ماذا تنتج الإعدادات المسبقة؟

يفتح المولد على الإعداد المسبق القديم. هذه هي الإعلانات الدقيقة التي يكتبها كل إعداد مسبق

تعيين مسبق	Css المولدة
لا أحد	filter: none;
تدرج الرمادي	filter: grayscale(100%);
خمر	filter: brightness(105%) contrast(110%) saturate(130%) sepia(45%);
دافئ	filter: brightness(105%) saturate(140%) sepia(25%);
رائع	filter: saturate(120%) hue-rotate(200deg);
دراماتيكي	filter: brightness(90%) contrast(150%) saturate(120%);
تلاشى	filter: brightness(110%) saturate(80%) opacity(80%);
عكس	filter: invert(100%);
طمس	filter: blur(4px);

الإعدادات المسبقة هي نقاط البداية. انقر فوق دافئ، ثم اسحب Blur إلى 2px، ويصبح الإخراج filter: blur(2px) brightness(105%) saturate(140%) sepia(25%);. انقر فوق لا شيء أو أعد التعيين ويعود إلى filter: none;.

الإعداد المسبق الرائع أقوى مما يوحي به اسمه: دوران درجة اللون بمقدار 200 درجة يحرك اللون البرتقالي نحو الأزرق والأزرق نحو البرتقالي. يقرأ كـ &quot؛cool&quot؛ على الصور الدافئة وكتحول كبير في الألوان على كل شيء آخر.

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

كيف يمكنك بناء مرشح مع المولد؟

1. افتح ال مرشح مولد CSS. يبدأ على خمر.
2. اختر الإعداد المسبق الأقرب إلى المظهر الذي تريده، أو انقر فوق "لا شيء" للبدء من "لا توجد مرشحات".
3. اسحب أشرطة التمرير. يتم تحديث المعاينة أثناء تحركك، ويتم تحديث خط CSS الذي تم إنشاؤه باستخدامه.
4. انقر فوق نسخ CSS لوضعها بالكامل filter: ...; إعلان على الحافظة الخاصة بك.
5. الصقها على المحدد لصورتك أو العنصر الخاص بك، ثم تحقق منها في الصفحة الحقيقية.

تظهر الوظائف المتغيرة فقط في الإخراج، لذا فإن نقل السطوع مرة أخرى إلى 100% بالضبط يزيله brightness() من الخط بدلا من المغادرة brightness(100%) خلف.

لماذا يكسر المرشح العناصر الثابتة والموضعة بشكل مطلق؟

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

ومن الناحية العملية، ينتج عن ذلك حشرتان كلاسيكيتان.

مشروط ثابت غير ثابت. عادة position: fixed يضع عنصرًا بالنسبة إلى إطار العرض. داخل سلف تمت تصفيته يتم وضعه بالنسبة لذلك السلف بدلاً من ذلك

.card { filter: grayscale(100%); }

/* Meant to cover the whole screen, but now covers only .card */
.card .modal { position: fixed; inset: 0; }

قطرة مخفية تحت الجيران. يصبح العنصر الذي تمت تصفيته سياق التراص الخاص به، لذلك طفل مع z-index: 1000 لم يعد من الممكن الارتفاع فوق العناصر الموجودة خارج البطاقة. إنه موجود فقط في الأعلى داخل البطاقة.

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

كيف يمكن مقارنة المرشحات بمرشح الخلفية والعتامة؟

تتداخل العديد من الخصائص مع وظائف التصفية، واختيار الخاصية المناسبة يتجنب الآثار الجانبية.

ملكية	يؤثر	الاستخدام النموذجي
filter	العنصر ومحتوياته	تأثيرات الصورة، والشعارات ذات التدرج الرمادي، طمس على الصورة
backdrop-filter	كل ما هو وراء العنصر	ألواح زجاجية متجمدة، تراكبات غير واضحة
opacity	العنصر ومحتوياته	تلاشي عنصر داخل أو خارج
filter: opacity()	العنصر ومحتوياته	الشفافية كجزء من سلسلة التصفية
mix-blend-mode	كيف يمتزج العنصر مع ما وراءه	تراكبات الألوان، وتأثيرات duotone

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

لتلاشي عنصر من تلقاء نفسه، عادي opacity هو الخيار الأكثر وضوحا. opacity() يعد وجود سلسلة مرشح داخل سلسلة المرشح مفيدًا عندما تكون قد قمت بالفعل بكتابة مرشح وتريد الشفافية في نفس السطر.

هل يمكنك تحريك مرشحات CSS؟

نعم. filter قابل للتحريك، والنمط الشائع هو شعار ذو تدرج رمادي يتحول إلى اللون عند التمرير:

.logo {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.logo:hover {
  filter: none;
}

المتصفح يقحم بين grayscale(100%) و none لأن none يتم التعامل معها على أنها وظائف المطابقة عند قيم هويتها. يعمل الاستيفاء بشكل نظيف عندما تدرج كلتا الحالتين نفس الوظائف بنفس الترتيب. إذا اختلفت قائمتا البداية والنهاية بالترتيب، فيمكن أن تقفز النتيجة بدلاً من تحريكها بسلاسة، لذا اكتب كلتا الحالتين بنفس ترتيب الوظائف.

هل تضر مرشحات CSS بالأداء؟

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

الحدود العملية:

• حافظ على نصف قطر التمويه صغيرًا على العناصر الكبيرة، وتجنب تحريك نصف القطر نفسه.
• قم بطمس عنصر أصغر أو صورة مصغرة بدلاً من غلاف صفحة كاملة.
• للحركة، تحريك transform و opacity، والتي تتعامل معها المتصفحات بكفاءة، وتحافظ على ثبات الفلتر.
• اختبر على هاتف متوسط المدى، وليس فقط على سطح المكتب.

أسئلة شائعة حول تأثيرات محددة

تظهر بعض التأثيرات في كثير من الأحيان بما يكفي للكتابة.

صورة بالأبيض والأسود: filter: grayscale(100%); القيم الأقل من 100% تترك بعض الألوان، لذا grayscale(50%) يعطي نظرة صامتة.

صورة خلفية خافتة خلف النص: filter: brightness(60%); على عنصر الصورة. تحقق من تباين النص بعد ذلك بدلاً من التخمين؛ ال مدقق تباين الألوان يعطي نسبة WCAG.

الوضع المظلم الخام لمستند أو رسم تخطيطي مضمن: filter: invert(100%) hue-rotate(180deg); يؤدي الانقلاب إلى قلب الضوء والظلام ولكنه يحول أيضًا الألوان إلى أضدادها؛ يؤدي تدوير اللون بمقدار 180 درجة إلى إعادة معظم الألوان نحو لونها الأصلي. إنه تقريبي، وستبدو الصور بالداخل خاطئة، لذا استبعدها.

منغم بالأبيض والأسود: filter: grayscale(100%) sepia(60%); كما عملت من خلال أعلاه.

المجموعة الكاملة من بناة CSS، بما في ذلك ظل النص والتحويلات، موجودة على محور أدوات CSS.

هل المولد خاص؟

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