Karışık Modlar

CSS Podcast - 024: Harmanlama Modları

Duotone, fotoğrafçılık için popüler bir renk işlemidir. Bu sayede, resimlerden biri parlak alanlar, diğeri loş ışıklar için olmak üzere yalnızca iki zıt renkten oluşuyormuş gibi görünür. Peki bunu CSS ile nasıl yapabilirsiniz?

Karışım modlarını ve öğrendiğiniz diğer teknikleri (ör. filtreler ve sahte öğeler) kullanarak bu efekti herhangi bir resme uygulayabilirsiniz.

Karışım modu nedir?

Karıştırma modları, Photoshop gibi tasarım araçlarında iki veya daha fazla katmandaki renkleri karıştırarak kompozisyon etkisi oluşturmak için yaygın olarak kullanılır. Renklerin karıştırılma şeklini değiştirerek oldukça ilgi çekici görsel efektler elde edebilirsiniz. Karıştırma modlarını yardımcı program olarak da kullanabilirsiniz. Örneğin, beyaz arka planı olan bir resmi, şeffaf bir arka plana sahip olacak şekilde izole edebilirsiniz.

Bir tasarım aracında mevcut olan harmanlama modlarının çoğunu CSS ile birlikte mix-blend-mode veya background-blend-mode özelliklerini kullanarak kullanabilirsiniz. mix-blend-mode, harmanlama işlemini bir öğenin tamamına, background-blend-mode ise bir öğenin arka planına uygular.

Bir öğede birden fazla arka planınız olduğunda ve tümünün birbiriyle uyumlu olmasını istediğinizde background-blend-mode kullanırsınız.

mix-blend-mode, sözde öğeleri de dahil olmak üzere öğenin tamamını etkiler. Bu kullanım alanlarından biri, sözde öğeleri aracılığıyla öğeye renk katmanları uygulanan çift tonlu resmin ilk örneğindedir.

Karışım modları iki kategoriye ayrılır: ayrılabilir ve ayrılamaz. Ayrılabilir harmanlama modu, RGB gibi her renk bileşenini ayrı ayrı dikkate alır. Ayrılamayan karıştırma modu, tüm renk bileşenlerini eşit şekilde dikkate alır.

Tarayıcı uyumluluğu

mix-blend-mode

background-blend-mode

Ayrılabilir karıştırma modları

Normal

Bu, varsayılan harmanlama modudur ve bir öğenin diğer öğelerle harmanlanma biçimiyle ilgili hiçbir şeyi değiştirmez.

Bulanık

multiply karıştırma modu, birden fazla saydamlığı üst üste yığmak gibidir. Beyaz pikseller şeffaf, siyah pikseller ise siyah görünür. Bunların arasında kalan değerler parlaklık (ışığı) değerlerini çarpar. Bu da ışıkların çok daha açık, daha koyu, daha koyu olması, çoğu zaman da daha koyu bir sonuç üretmesi anlamına geliyor.

.my-element {
  mix-blend-mode: multiply;
}

Ekran

screen kullanımı, light değerlerini çarpar. Bu değer, multiply ile ters etki oluşturur ve çoğu zaman daha parlak bir sonuç verir.

.my-element {
  mix-blend-mode: screen;
}

Video içi yer paylaşımlı reklamlar

Bu harmanlama modu (overlay) multiply ve screen özelliklerini birleştirir. Temel koyu renkler daha koyu, temel açık renkler ise daha açık hale gelir. %50 gri gibi orta düzey renkler etkilenmez.

.my-element {
  mix-blend-mode: overlay;
}

Koyulaştır

darken karıştırma modu, kaynak resim ile arka plan resminin koyu renk parlaklığını karşılaştırır ve bu ikisinden en koyu olanı seçer. Bunu, her renk kanalı için parlaklık yerine rgb değerlerini (multiply ve screen'nin yapacağı gibi) karşılaştırarak yapar. darken ve lighten ile genellikle bu karşılaştırma işlemi kullanılarak yeni renk değerleri oluşturulur.

.my-element {
  mix-blend-mode: darken;
}

Aydınlat

lighten kullanımı darken işlevinin tam tersini yapar.

.my-element {
  mix-blend-mode: lighten;
}

Renk soldurma

color-dodge kullanırsanız arka plan rengini kaynak rengi yansıtacak şekilde açar. Saf siyah renkler, bu modda herhangi bir etki görmez.

.my-element {
  mix-blend-mode: color-dodge;
}

Renk yanması

color-burn harmanlama modu multiply harmanlama moduna çok benzer ancak kontrastı artırarak daha doymuş orta tonlar ve daha az parlak alan sağlar.

.my-element {
  mix-blend-mode: color-burn;
}

Sert ışık

hard-light kullanıldığında canlı bir kontrast oluşturulur. Bu karıştırma modu, ekranları veya parlaklık değerlerini çarpar. Piksel değeri% 50'den daha açık griyse resim, filtrelenmiş gibi daha açık hale getirilir. Daha koyuysa çarpılır.

.my-element {
  mix-blend-mode: hard-light;
}

Yumuşak ışık

soft-light harmanlama modu, overlay ürününün daha az sert bir versiyonudur. Bu ekran, daha az kontrastla aşağı yukarı aynı şekilde çalışır.

.my-element {
  mix-blend-mode: soft-light;
}

Fark

difference özelliğinin işleyişini, tıpkı bir fotoğraf negatifinin işleyiş şekli gibi gösterebilirsiniz. difference karıştırma modu, açık renkleri tersine çevirerek her pikselin fark değerini alır. Renk değerleri aynıysa bunlar siyah olur. Değerlerdeki farklılıklar ters çevrilir.

.my-element {
  mix-blend-mode: difference;
}

Hariç tutulanlar

exclusion kullanımı difference ile çok benzerdir ancak aynı pikseller için siyah rengi döndürmek yerine% 50 gri sonuç verir. Bu da daha az kontrasta sahip daha yumuşak bir çıktı sağlar.

.my-element {
  mix-blend-mode: exclusion;
}

Ayrılamayan karıştırma modları

Bu karıştırma modlarını HSL renk bileşenleri gibi düşünebilirsiniz. Her biri, etkin katmandan belirli bir bileşen değerini alır ve bunu diğer bileşen değerleriyle karıştırır.

Ton

hue karıştırma modu, kaynak renginin tonunu alıp arka plan renginin doygunluğuna ve parlaklığına uygular.

.my-element {
  mix-blend-mode: hue;
}

Doygunluk

Bu işlem, hue gibi çalışır ancak karıştırma modu olarak saturation kullanıldığında, kaynak rengin doygunluğu arka plan renginin tonuna ve parlaklığına uygulanır.

.my-element {
  mix-blend-mode: saturation;
}

Renk

color karıştırma modu, kaynak rengin tonu ve doygunluğuyla arka plan renginin parlaklığından bir renk oluşturur.

.my-element {
  mix-blend-mode: color;
}

Parlaklık

Son olarak, luminosity, color değerinin tersidir. Kaynak rengin parlaklığı ile arka plan renginin ton ve doygunluğuyla bir renk oluşturur.

.my-element {
  mix-blend-mode: luminosity;
}

isolation özelliği

isolation özelliğini isolate değerine ayarlarsanız bu işlem, yeni bir yığın bağlamı oluşturarak arka plan katmanıyla karışmasını engeller. Z-endeksi modülünde öğrendiğiniz gibi, yeni bir yığın bağlamı oluşturduğunuzda bu katman temel katman haline gelir. Bu, üst düzeyde karıştırma modlarının artık geçerli olmayacağı anlamına gelir. Ancak, isolation: isolate ayarlanmış bir öğenin içindeki öğeler yine de harmanlanabilir.

Arka plan özelliği zaten izole edilmiş olduğundan bunun background-blend-mode ile çalışmayacağını unutmayın.

Öğrendiklerinizi sınayın

Karışım modlarıyla ilgili bilginizi test edin