پادکست 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
کار نمی کند زیرا ویژگی پس زمینه قبلاً ایزوله شده است.
درک خود را بررسی کنید
دانش خود را در مورد حالت های ترکیبی آزمایش کنید
کدام یک از حالت های ترکیبی CSS هستند؟
اگر می خواهید رنگ های مختلف را به روش های مختلف ترکیب کنید، به کدام سبک از حالت ترکیبی نیاز دارید؟