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