یکی از ارزشمندترین ویژگی‌های فتوشاپ – مسلماً ویژگی‌ای که آن را از رقبای خود جلوتر می‌کند – حالت‌های ترکیبی است. حالت های ترکیبی دو پیکسل قرار می گیرند روی روی هم قرار دهید و آنها را به روش های مختلف ترکیب کنید، برای مثال حالت ترکیب رنگ تیره تر به سادگی تیره تر از دو پیکسل را نشان می دهد. هنگامی که در یک تصویر کامل گسترش می یابد، حالت های ترکیبی می توانند جلوه های خیره کننده ای ایجاد کنند.

اگرچه فتوشاپ Adobe حالت های ترکیبی را اختراع نکرده است، پیاده سازی آن مطمئناً شبیه سازی شده ترین است. اما اکنون، برای استایل دادن به تصاویر خود به فتوشاپ نیازی ندارید، زیرا ما می توانیم همه این کارها را به صورت پویا و با CSS3 انجام دهیم.

پشتیبانی مرورگر

همانطور که ایستاده است، پشتیبانی از مرورگر برای CSS’ پس زمینه-ترکیب-حالت اموال در حال بهبود است نسخه‌های قبلی مرورگرها به پیشوندهای فروشنده و یا فعال‌سازی ویژگی‌های آزمایشی نیاز داشتند، اما caniuse.com گزارش پشتیبانی در نسخه های فعلی کروم، فایرفاکس و اپرا، با سافاری به زودی.

هنوز هیچ نشانه ای از پشتیبانی اینترنت اکسپلورر وجود ندارد، اما از آنجایی که حالت های ترکیبی یک پیشرفت تدریجی هستند، می توانیم از هم اکنون استفاده از آنها را در نظر بگیریم.

روش استفاده پس زمینه-ترکیب-حالت

تعدادی گزینه blend mode در توصیه های کاندید CSS3 وجود دارد، اما مفیدترین آنها برای اهداف ما است پس زمینه-ترکیب-حالت. این ویژگی به ما امکان می دهد دو تصویر یا یک تصویر و یک رنگ پس زمینه را با هم ترکیب کنیم.

این کدی است که ما نیاز داریم:

<div class="blend"></div>

و CSS اصلی ما اینجاست:

.blend
{
 width:782px;
 height:540px;
 background:#3db6b8 url("lighthouse.jpg") no-repeat center center;
}

اکنون آماده اضافه کردن حالت های ترکیبی هستیم.

برای انجام این کار، ما یک کلاس دیگر را به div خود اضافه می کنیم، به عنوان مثال “multiply”:

<div class="blend multiply"></div>

و سپس یک قانون سبک دوم ایجاد می کنیم:

.blend.multiply
 {
 background-blend-mode: multiply;
 }

اگر می خواهید به کد نگاهی بیندازید، می توانید فایل های منبع را از اینجا دانلود کنید.

تکثیر کردن

تکثیر کردنهمانطور که از نام آن پیداست، پیکسل پایه را در رنگ ترکیبی ضرب می کند و در نتیجه رنگ تیره تر می شود. ضرب مشکی باعث سیاهی می شود و با ضرب سفیدی تصویر بدون تغییر باقی می ماند.

background-blend-mode: multiply;

صفحه نمایش

صفحه نمایش معکوس دو رنگ پیکسل را ضرب می کند. صفحه نمایش برعکس است تکثیر کردن و با استفاده از صفحه نمایش روی سفید منجر به یک تصویر سفید می شود و روی رنگ سیاه تصویر را بدون تغییر باقی می گذارد.

background-blend-mode: screen; 

پوشش

پوشش یک حالت ترکیبی پیچیده است. ضرب بستگی دارد روی رنگ پایه: رنگ های روشن روشن تر می شوند، رنگ های تیره تیره تر می شوند.

background-blend-mode: overlay;

تاریک کنید

تاریک کنید، یک تصویر را تاریک می کند. به دو پیکسل روی هم افتاده نگاه می کند و تیره تر از این دو را انتخاب می کند.

background-blend-mode: darken;

سبک کردن

نقطه مقابل قطبی تاریک کردن، سبک کردن با مقایسه دو پیکسل روی هم رفته و انتخاب سبکتر از این دو، یک تصویر را روشن می کند.

background-blend-mode: lighten;

طفره رفتن رنگ

طفره رفتن رنگ رنگ پایه را روشن می کند تا رنگ ترکیبی را با کاهش کنتراست منعکس کند.

background-blend-mode: color-dodge;

رنگ سوختن

رنگ سوختن نقطه مقابل قطبی است طفره رفتن رنگ، رنگ پایه را تیره می کند و در نتیجه کنتراست را افزایش می دهد.

background-blend-mode: color-burn;

نور سخت

نور سخت بسته به رنگ ها یا ضرب می شود یا رنگ ها را نمایش می دهد روی رنگ ترکیبی اگر ترکیب روشن تر از 50% خاکستری باشد، تصویر روشن می شود، در غیر این صورت تیره می شود. این یک راه عالی برای افزایش هایلایت و سایه ها در یک تصویر است.

background-blend-mode: hard-light;

نور نرم

نور نرم شبیه است به نور سخت، اما به جای ضرب یا نمایش رنگ ها، نور ملایم از جاخالی دادن و سوزاندن برای جلوه ای ظریف تر استفاده می کند.

background-blend-mode: soft-light;

تفاوت

تفاوت دو پیکسل روی هم را با هم مقایسه می کند و رنگ با روشنایی بیشتر را از دیگری کم می کند.

background-blend-mode: difference;

محرومیت

محرومیت شبیه است به تفاوت، اما کنتراست کمتری ایجاد می کند بنابراین کمی قابل استفاده تر است.

background-blend-mode: exclusion;

رنگ

رنگ درخشندگی و اشباع رنگ پایه و رنگ ترکیبی را می گیرد و آنها را ادغام می کند.

background-blend-mode: hue;

اشباع

اشباع، پسندیدن رنگ، دو مقدار از رنگ پایه را با یک خاصیت رنگ ترکیبی، در این مورد اشباع، ادغام می کند.

background-blend-mode: saturation;

رنگ

رنگ از همان الگوی پیروی می کند رنگ و اشباعاما این بار درخشندگی رنگ پایه و رنگ و اشباع رنگ ترکیبی است.

background-blend-mode: color;

درخشندگی

درخشندگی برعکس است رنگ، رنگ و اشباع رنگ پایه و درخشندگی رنگ ترکیبی را با هم ترکیب می کند.

background-blend-mode: luminosity;

تصویر استفاده شده در سراسر مقاله است تصویر فانوس دریایی از طریق Shutterstock.