بودكاست 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
.
لأن خاصية الخلفية معزولة بالفعل.
التحقق من فهمك
اختبِر معلوماتك عن أوضاع المزج
أي مما يلي يعد أوضاع مزج CSS؟
إذا كنت تريد مزج ألوان مختلفة بطرق مختلفة، فما نمط وضع المزج الذي ستحتاجه؟