أوضاع الدمج

بودكاست CSS - 024: أوضاع الدمج

Duotone هو علاج لون شائع للتصوير الفوتوغرافي ما يجعل الصورة تبدو وكأنّها تتألّف من لونَين متباينَين فقط: أحدهما للأضواء المنخفضة والآخر للإضاءة المنخفضة. كيف يمكن تنفيذ ذلك باستخدام لغة CSS؟

وباستخدام أوضاع المزج — والتقنيات الأخرى التي تعلمتها، مثل الفلاتر العناصر الزائفة: يمكنك تطبيق هذا التأثير على أي صورة.

ما هو وضع المزج؟

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

يمكنك استخدام معظم أوضاع المزج المتاحة في أداة التصميم باستخدام CSS، باستخدام mix-blend-mode أو background-blend-mode تطبّق السمة mix-blend-mode المزج على عنصر كامل. وتطبِّق السمة background-blend-mode المزج على خلفية أحد العناصر.

يمكنك استخدام background-blend-mode عند توفّر عدة خلفيات لأحد العناصر. ونريدها أن تتمزج جميعها مع بعضها البعض.

ويؤثر mix-blend-mode في العنصر بالكامل، بما في ذلك العناصر الزائفة. إحدى حالات الاستخدام هي في المثال الأولي لصورة ثنائية اللون، والذي يحتوي على طبقات لون مطبقة على العنصر من خلال عناصره الزائفة.

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

توافُق المتصفح

mix-blend-mode

background-blend-mode

أوضاع الدمج القابلة للفصل

عادي

هذا هو وضع المزج الافتراضي ولا يؤدي إلى تغيير كيفية مزج أحد العناصر مع العناصر الأخرى.

ضرب

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

.my-element {
  mix-blend-mode: multiply;
}

الشاشة

يؤدي استخدام screen إلى ضرب قيم الضوء، وهو تأثير عكسي على multiply، وغالبًا ما ينتج عنه نتيجة أكثر إشراقًا.

.my-element {
  mix-blend-mode: screen;
}

محتوى مركّب

يجمع وضع الدمج هذا، overlay، بين multiply وscreen. تصبح الألوان الداكنة الأساسية أغمق وتصبح ألوان الإضاءة الأساسية أفتح. لا تتأثّر الألوان المتوسطة المدى، مثل اللون الرمادي بنسبة 50%.

.my-element {
  mix-blend-mode: overlay;
}

تعتيم

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

.my-element {
  mix-blend-mode: darken;
}

Lighten

يؤدي استخدام lighten إلى عكس darken.

.my-element {
  mix-blend-mode: lighten;
}

تجنب الألوان

في حال استخدام السمة color-dodge، سيتم تعتيم لون الخلفية ليعكس لون المصدر. ولا يكون للألوان السوداء الخالصة أي تأثير من هذا الوضع.

.my-element {
  mix-blend-mode: color-dodge;
}

حرق الألوان

يشبه وضع المزج color-burn إلى حد كبير وضع المزج multiply، لكنها تزيد من التباين، ما يؤدي إلى زيادة تشبُّع درجات الألوان المتوسطة وتقليل درجة الإضاءة.

.my-element {
  mix-blend-mode: color-burn;
}

ضوء شديد

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

.my-element {
  mix-blend-mode: hard-light;
}

ضوء خفيف

وضع المزج soft-light هو إصدار أقل حدة من overlay. وهو يعمل بنفس الطريقة إلى حد كبير مع تباين أقل.

.my-element {
  mix-blend-mode: soft-light;
}

الفرق

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

.my-element {
  mix-blend-mode: difference;
}

الاستبعاد

يتشابه استخدام exclusion إلى حد كبير مع difference، ولكن بدلاً من عرض اللون الأسود للبكسل المتطابق، فسيعرض باللون الرمادي بنسبة 50٪، مما يؤدي إلى إخراج أخف مع تباين أقل.

.my-element {
  mix-blend-mode: exclusion;
}

أوضاع المزج غير القابلة للفصل

يمكنك التفكير في أوضاع المزج هذه مثل مكونات color HSL. يأخذ كل منها قيمة مكون معينة من الطبقة النشطة ويمزجها مع قيم المكونات الأخرى.

تدرج اللون

يستخدم وضع المزج hue تدرُّج لون المصدر. وتطبقه على تشبّع اللون والسطوع في لون الخلفية.

.my-element {
  mix-blend-mode: hue;
}

تشبع اللون

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

.my-element {
  mix-blend-mode: saturation;
}

اللون

سينشئ وضع المزج color لونًا من تدرُّج اللون وتشبّع لونه المصدر. وإضاءة لون الخلفية.

.my-element {
  mix-blend-mode: color;
}

السطوع

أخيرًا، luminosity هو عكس color. ويتم إنشاء لون باستخدام لمعان اللون المصدر وتدرج لون الخلفية وتشبّع لونه.

.my-element {
  mix-blend-mode: luminosity;
}

السمة isolation

في حال ضبط isolation على قيمة isolate، فسيتم إنشاء سياق تكديس جديد، ما سيمنع مزجه مع طبقة خلفية. كما تعلمت في وحدة فهرس z، عند إنشاء سياق تكديس جديد، تصبح هذه الطبقة هي الطبقة الأساسية. وهذا يعني أنه لن يتم تطبيق أوضاع الدمج على مستوى الأصل بعد الآن، ولكن العناصر داخل أحد العناصر التي تحتوي على مجموعة isolation: isolate يمكن أن تتداخل.

يُرجى العلم أنّ هذا الإجراء لا يعمل مع background-blend-mode. لأن خاصية الخلفية معزولة بالفعل.

التحقق من فهمك

اختبِر معلوماتك عن أوضاع المزج