حالت های ترکیبی

پادکست CSS - 024: حالت های ترکیبی

Duotone یک روش رنگی محبوب برای عکاسی است که باعث می شود یک تصویر به نظر برسد که فقط از دو رنگ متضاد تشکیل شده است: یکی برای هایلایت و دیگری برای نورهای کم. چگونه این کار را با CSS انجام می دهید؟

با استفاده از حالت های ترکیبی - و تکنیک های دیگری که در مورد آنها آموخته اید، مانند فیلترها و شبه عناصر - می توانید این افکت را روی هر تصویری اعمال کنید.

حالت ترکیبی چیست؟

حالت های ترکیبی معمولاً در ابزارهای طراحی مانند فتوشاپ برای ایجاد یک جلوه ترکیبی با ترکیب رنگ ها از دو یا چند لایه استفاده می شود. با تغییر نحوه ترکیب رنگ ها، می توانید به جلوه های بصری واقعا جالبی برسید. همچنین می‌توانید از حالت‌های ترکیبی به عنوان یک ابزار استفاده کنید، مانند جداسازی تصویری که پس‌زمینه سفید دارد، بنابراین به نظر می‌رسد که پس‌زمینه شفافی دارد.

شما می‌توانید از اکثر حالت‌های ترکیبی موجود در ابزار طراحی با CSS، با استفاده از ویژگی‌های mix-blend-mode یا background-blend-mode استفاده کنید. mix-blend-mode ترکیبی را برای یک عنصر کامل اعمال می‌کند و background-blend-mode ترکیب را برای پس‌زمینه یک عنصر اعمال می‌کند.

هنگامی که چندین پس‌زمینه روی یک عنصر دارید و می‌خواهید همه آنها با یکدیگر ترکیب شوند background-blend-mode استفاده می‌کنید.

mix-blend-mode بر کل عنصر از جمله شبه عناصر آن تأثیر می گذارد. یک مورد استفاده در مثال اولیه یک تصویر دوتایی است که دارای لایه‌های رنگی است که از طریق عناصر شبه آن به عنصر اعمال می‌شود.

حالت های ترکیبی به دو دسته تقسیم می شوند: قابل تفکیک و غیرقابل تفکیک. یک حالت ترکیبی جداشدنی هر جزء رنگی مانند RGB را به صورت جداگانه در نظر می گیرد. یک حالت ترکیبی غیرقابل تفکیک همه اجزای رنگ را به یک اندازه در نظر می گیرد.

سازگاری با مرورگر

mix-blend-mode

background-blend-mode

حالت های ترکیبی قابل تفکیک

طبیعی

این حالت ترکیبی پیش‌فرض است و چیزی در مورد نحوه ترکیب یک عنصر با سایرین تغییر نمی‌دهد.

تکثیر کردن

حالت multiply Blend مانند چیدن چند شفاف بر روی هم است. پیکسل های سفید شفاف و پیکسل های سیاه سیاه به نظر می رسند. هر چیزی در این بین مقادیر درخشندگی (نور) آن را چند برابر می کند. این بدان معناست که نورها بسیار روشن‌تر و تاریک‌تر، تاریک‌تر می‌شوند - اغلب نتیجه تیره‌تری ایجاد می‌کنند.

.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-index آموختید، زمانی که یک زمینه انباشتگی جدید ایجاد می کنید، آن لایه به لایه پایه تبدیل می شود. این بدان معناست که حالت‌های ترکیبی در سطح والد دیگر اعمال نمی‌شوند، اما عناصر داخل یک عنصر با isolation: isolate همچنان می‌تواند ترکیب شود.

توجه داشته باشید که این حالت با background-blend-mode کار نمی کند زیرا ویژگی پس زمینه قبلاً ایزوله شده است.

درک خود را بررسی کنید

دانش خود را در مورد حالت های ترکیبی آزمایش کنید