أوضاع الدمج

بودكاست 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 بين لمعان اللون الداكن للصورة المصدر والصورة الخلفية ويختار أغمق اللونين معًا. ويتم ذلك من خلال مقارنة قيم نموذج أحمر أخضر أزرق (RGB) بدلاً من السطوع (كما هو الحال بالنسبة إلى multiply وscreen)، لكل قناة ألوان. باستخدام darken وlighten، غالبًا ما يتم إنشاء قيم ألوان جديدة من عملية المقارنة هذه.

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

تخفيف الإضاءة

ويؤدي استخدام 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;
}

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

يمكنك التفكير في أوضاع الدمج هذه، مثل مكوّنات اللون 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 لأنّ سمة الخلفية معزولة حاليًا.

التحقّق من استيعابك

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