كيفية استخدام أوضاع مزيج CSS

تعد أوضاع المزج CSS طريقة سهلة لإضافة تأثيرات الصور مباشرة داخل متصفحك.

لهذا السبب ، فإن الطريقة التقليدية لتحرير الصور ثم حفظها من أحد حلول برامج تحرير الصور ليست ضرورية دائمًا. كمصممين ، لقد أمضينا ساعات لا تحصى في إضافة تأثيرات للصور باستخدام أدوات مثل Adobe Photoshop. أثناء استعراضك لهذا البرنامج التعليمي ، ستلاحظ أن الكثير من الخيارات تشبه تلك الموجودة في Photoshop ، ولكن يمكن إجراؤها الآن بكفاءة تصميم CSS.

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

أوضاع مزيج CSS وأوضاع مزيج CSS

سيغطي هذا البرنامج التعليمي أوضاع مزيج CSS وكيفية استخدامها. للبدء ، هناك عدة خيارات مختلفة يجب أن تكون على دراية بها. أحدهما له تأثير مع background-blend-mode والآخر مع mix-blend-mode .

باستخدام background-blend-mode property ، يمكنك مزج طبقات الخلفية (الصورة أو اللون) لعنصر ما. يتم تعريف أوضاع المزج على أنها قيمة وتحدد كيفية مزج أو مزج ألوان صورة الخلفية مع اللون ، أو صور الخلفية الأخرى ، خلفها.

ماذا يحدث إذا كنت تريد القيام ببعض المزج ولكن ليس مع عناصر الخلفية؟ يمكن مزج العناصر معًا باستخدام خاصية mix-blend-mode . تصف هذه الخاصية كيف يجب أن يكون المزج بين عناصر HTML المكدسة. ستندمج العناصر الموجودة في الطبقات المتداخلة مع العناصر الموجودة تحتها. ستتأثر أي صور أو نص أو حدود أو عناوين بهذه الخاصية.

مثال ضرب أدوبي فوتوشوب

يمنحنا إلقاء نظرة على الطريقة التقليدية لإظهار أوضاع المزج في محرر الصور فكرة عما يمكننا إنجازه باستخدام أوضاع مزيج CSS. تم إنشاء الصورة التالية في Adobe Photoshop. الصورة على طبقة الخلفية الخاصة بها مع طبقة حمراء أعلاه. تم تحديد وضع مزج للطبقة الحمراء ، وهو "Multiply". كما ترى ، هناك تراكب أحمر. لتحقيق هذا التأثير ، يأخذ Adobe Photoshop الألوان من الطبقة المطبقة عليها "Multiply" ، يضرب في الألوان الموجودة على الطبقة (الطبقات) الموجودة تحتها ، ثم يقسمها على 255 لإظهار النتيجة.

يمكن تحقيق هذا التأثير نفسه باستخدام CSS مما يسمح بالتخصيص بشكل أسرع والتحديث السهل.

مثال أساسي لوضع مزيج CSS

مثال بسيط لمعرفة كيفية عمل صيغ المزج هو مزج الصورة مع background-color . أولاً ، يجب الإعلان عن مسار URL للصورة ، ثم تحديد اللون. بعد أن يتم تحديد ذلك ، يجب اختيار وضع المزج. تم تحديد Multiply هنا لإظهار كيف يؤثر وضع المزج هذا على مظهر background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

صيغة المزج هي الطريقة التي يتم بها حساب قيمة اللون النهائية للبكسل عندما تتداخل الطبقات. تأخذ كل صيغة مزج قيمة لون المقدمة والخلفية (اللون العلوي واللون السفلي) ، وتحسب قيمتها ، وتعيد قيمة اللون. الطبقة النهائية المرئية هي نتيجة حساب صيغة المزج على كل بكسل متداخل بين الطبقات الممزوجة.

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

وضع مزج الخلفية مع صورتين

بدلاً من وجود تراكب لوني على صورة ، فإن وضع صورتين معًا يمكن أن يكون له تأثير رائع. الأمر سهل مثل إضافة صورتين للخلفية في إعلان CSS. الخيار التالي هو أن يكون لديك لون خلفية (أو لا). إذا كنت لا تريد لون الخلفية ، فيمكن إزالته وستدمج الصور معًا اعتمادًا على وضع المزج الذي تختاره.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

التدرج في أوضاع مزيج الخلفية

بدلاً من استخدام لون واحد فقط ، يمكن أن تعطي التدرجات بعض التأثيرات الفريدة.

 .gradient-on-image {
 خلفية:
 التدرج الخطي (أرجواني 0٪ ، أحمر 80٪) ،
 التدرج الخطي (إلى اليمين ، أرجواني 0٪ ، أصفر 100٪) ، url ("image.jpg") ؛
 وضع مزيج الخلفية: الشاشة ، والفرق ، والتفتيح ؛
 } 

ستلاحظ أيضًا أن هذا المثال يحتوي على أوضاع دمج خلفية متعددة. إذا لم يكن وضع المزج كافيًا ، فيمكن استخدام العديد.

يمكن العثور على أمثلة العمل في هذا Codepen.

أمثلة على وضع المزج

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

تبدو الأشياء كما هي من background-blend-modes باستثناء الوضع الأولي ، والوراثة ، وغير المضبوط.

• الضبط الأولي: الإعداد الافتراضي للخاصية التي لا تعين وضع المزج.
• توارث: يرث صيغة المزج من العنصر الأصل.
• Unset: يزيل صيغة المزج من عنصر.

مثال أساسي على وضع المزج المختلط مع العزلة

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

مزيج النص والصورة مع وضع المزج

في هذا المثال ، يحتوي div الذي يحتوي على فئة من img-wrap على الصورة. الصورة لديها mix-blend-mode وضرب. بشكل أساسي ، يبدو أن الصورة تقع في الخلفية.

لمنع حدوث ذلك ، يجب أن يكون ملف img-wrap div (الذي يحتوي أيضًا على نص العنوان) مجموعة جديدة من المحتوى المكدس بحيث يتم فصله عن خلفية عنصر النص الأساسي. يتم ذلك باستخدام خاصية العزل. القيمة الافتراضية هي auto ، لذا فإن isolation: isolate; سوف تحتاج إلى أن تضاف.

لاختبار ذلك ، قم بالتعليق على خاصية العزل على div باستخدام فئة .img-wrap وتحقق من النتيجة.

هنا HTML:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

هنا CSS. انتبه جيدًا isolate الموجود على ملف .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

يمكن العثور على مثال العمل على Codepen.

قص النص مع وضع المزج

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

هنا HTML:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

الذي يحتوي على <div> مليء بصورة خلفية الغابة.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

تم تصميم العنوان الموجود بداخله بلون خلفية اختياري. العنوان له تأثير شفاف مع صورة الخلفية شبه الشفافة باستخدام mix-blend-mode من الضرب:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

يمكن العثور على مثال العمل على Codepen.

وضع المزج و SVG

تحظى ملفات SVG بشعبية كبيرة على الويب ، كما تعمل أوضاع المزج CSS معها بشكل جيد. يمكن استهداف الأشكال بسهولة لمنحهم وضع المزج المطلوب.

كانت العزلة أساسية في هذا المثال أيضًا. بدون عزل الدوائر ، ستتداخل الخلفية الرمادية.

إليك رمز إنشاء مجموعة الدوائر:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

فيما يلي أنماط CSS:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

يمكن العثور على هذا المثال في Codepen.

دعم المستعرض لوضع مزيج الخلفية ووضع مزيج المزج

دعم المتصفح جيد جدًا ، ولكنه ليس متسقًا تمامًا مع وضع مزيج الخلفية. قبل البدء في تصميم باستخدام هذه الميزة ، تأكد من التحقق من Can I Use. حاليًا ، يفتقر Edge و Safari إلى الدعم. للتعامل مع الدعم المحدود واعتمادًا على المتصفحات التي تحتاج إلى دعم ، قد يكون استعلام ميزات CSS خيارًا جيدًا. إذا لم يكن الأمر كذلك ، فإن التفكير في الصور "الممزوجة" على أنها تحسين (وليس شرطًا) قد يكون أفضل رهان لك.

يعد دعم المتصفح أفضل قليلاً لوضع المزج. من الجيد أن تكون على دراية بالدعم الجزئي. على سبيل المثال ، لا يدعم Safari تدرج اللون أو التشبع أو اللون أو السطوع.

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

قم بتغذية حرية الإبداع باستخدام WP Engine

يوفر WP Engine حرية الإنشاء على WordPress. تعمل منتجات الشركة ، وهي الأسرع بين جميع مزودي WordPress ، على تشغيل 1.5 مليون تجربة رقمية. يستخدم أكثر من 200000 موقع في العالم WP Engine لتشغيل تجاربهم الرقمية أكثر من أي شخص آخر في WordPress. ابحث عن المزيد على wpengine.com أو تحدث إلى أحد الممثلين اليوم!