واحدة من أكثر الميزات التي لا تقدر بثمن في Photoshop - يمكن القول إن الميزة التي تعمل بها قبل المنافسة - هي صيغ مزيج. تأخذ صيغ المزج بيكسلتين موضوعة فوق بعضها البعض وتجمع بينهما بطرق مختلفة ، على سبيل المثال ، سيؤدي وضع مزج الألوان الداكن إلى عرض اللونين الداكنين ببساطة أكثر قتامة. عند توسيعها عبر صورة كاملة ، يمكن أن تنتج صيغ المزج بعض التأثيرات المذهلة.
على الرغم من أن Adobe Photoshop لم يخترع صيغ المزج ، إلا أن تنفيذها هو الأكثر محاكاة. ولكن الآن ، لا تحتاج إلى أن يقوم Photoshop بتصوير صورك بهذه الطريقة ، لأننا نستطيع القيام بذلك بشكل ديناميكي ، باستخدام CSS3.
كما هو قائم دعم المتصفح لخاصية وضع المزج الخلفية لـ CSS تتحسن. تتطلب الإصدارات السابقة من المتصفحات بادئات البائعين و / أو تفعيل الميزات التجريبية ، ولكن caniuse.com تقارير الدعم في الإصدارات الحالية من Chrome و Firefox و Opera ، مع Safari بعد وقت قصير.
لا يوجد أي دليل على دعم IE حتى الآن ، ولكن نظرًا لأن صيغ المزج هي تحسينات تدريجية ، يمكننا البدء في التفكير في استخدامها الآن.
هناك عدد من خيارات وضع الدمج في توصيات مرشح CSS3 ، ولكن الأكثر فائدة في أغراضنا هو وضع الخلفية-مزيج . تسمح لنا هذه الخاصية بمزج صورتين ، أو صورة ولون خلفية.
إليك الرمز الذي نحتاجه:
وهنا لدينا CSS الأساسية:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}نحن الآن على استعداد لإضافة صيغ المزج.
للقيام بذلك ، سنقوم بإضافة فصل آخر إلى قسمنا ، على سبيل المثال "مضاعفة":
ثم سننشئ قاعدة نمط ثانٍ:
.blend.multiply{background-blend-mode: multiply;}إذا كنت ترغب في إلقاء نظرة على الرمز ، يمكنك ذلك قم بتنزيل الملفات المصدر هنا.
يضاعف الضرب ، كما يوحي الاسم ، البكسل الأساسي بلون المزج ، مما يؤدي إلى لون أغمق. يؤدي ضرب الأسود إلى ظهور الأسود ، وضرب الأوراق البيضاء دون تغيير الصورة.
background-blend-mode: multiply;تراكب هو وضع مزيج مركب. يعتمد الضرب على اللون الأساسي: فالألوان الفاتحة تصبح أفتح ، والألوان الداكنة تصبح أكثر قتامة.
background-blend-mode: overlay;إن العكس القطبي للظلام ، يخفف من الصورة عن طريق مقارنة بيكسلتين متداخلتين واختيار أخف الإثنين.
background-blend-mode: lighten;حرق اللون هو عكس القطبية من دودج ، فإنه يغمق اللون الأساسي مما أدى إلى زيادة في التباين.
background-blend-mode: color-burn;يتشابه الضوء الخافت مع الضوء الصلب ، ولكن بدلاً من Multiplying أو فحص الألوان ، يستخدم الضوء الناعم دودج ويحترق من أجل تأثير ضار.
background-blend-mode: soft-light;الاستبعاد مشابه للفرق ، ولكنه ينتج تباينًا أقل ، لذا يمكن استخدامه قليلاً.
background-blend-mode: exclusion;التشبع ، مثل الصبغة ، يدمج اثنين من قيم اللون الأساسي مع خاصية واحدة من لون المزج ، في هذه الحالة التشبع.
background-blend-mode: saturation;اللمعان هو عكس اللون ، فهو يجمع بين لون وتشبع اللون الأساسي وإضاءة لون المزج.
background-blend-mode: luminosity;