Karışık Modlar

Çift ton, fotoğraflarda kullanılan popüler bir renklendirme tekniğidir. Bu teknikte, görüntü yalnızca iki zıt renkten (biri parlak, diğeri koyu tonlar için) oluşur. Peki bunu CSS ile nasıl yaparsınız?

Karışım modlarını ve filtreler ile sözde öğeler gibi öğrendiğiniz diğer teknikleri kullanarak bu efekti herhangi bir resme uygulayabilirsiniz.

Harmanlama modu nedir?

Karışım modları, iki veya daha fazla katmandaki renkleri karıştırarak bir kompozisyon efekti oluşturmak için Photoshop gibi tasarım araçlarında yaygın olarak kullanılır. Renklerin karışım şeklini değiştirerek gerçekten ilginç görsel efektler elde edebilirsiniz. Karışım modlarını yardımcı program olarak da kullanabilirsiniz. Örneğin, beyaz arka planlı bir resmin arka planını şeffaf görünecek şekilde ayırabilirsiniz.

Bir tasarım aracında bulunan karışım modlarının çoğunu, mix-blend-mode veya background-blend-mode özelliklerini kullanarak CSS ile kullanabilirsiniz. mix-blend-mode, öğenin tamamına, background-blend-mode ise öğenin arka planına karışımı uygular.

Bir öğede birden fazla arka planınız varsa ve bunların hepsinin birbirine karışmasını istiyorsanız background-blend-mode öğesini kullanırsınız.

mix-blend-mode, sözde öğeleri de dahil olmak üzere öğenin tamamını etkiler. Bir kullanım alanı, sözde öğeleri aracılığıyla öğeye renk katmanlarının uygulandığı iki tonlu resimle ilgili ilk örnekte gösterilmektedir.

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

Tarayıcı uyumluluğu

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

Ayrılabilir harmanlama modları

Normal

Bu, varsayılan harmanlama modudur ve bir öğenin diğer öğelerle nasıl harmanlandığı konusunda hiçbir değişiklik yapmaz.

Çarp

multiply Karışım modu, birden fazla saydamlığın üst üste yığılması gibidir. Beyaz pikseller şeffaf, siyah pikseller ise siyah görünür. Bu değerler arasında kalan değerler, parlaklığı (ışık) değerlerini çarpar. Bu durumda, açık renkler çok daha açık, koyu renkler ise daha koyu olur. Sonuç olarak genellikle daha koyu bir görüntü elde edilir.

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

Ekran

screen kullanıldığında ışık değerleri çarpılır. Bu, multiply ile ters etkidir ve genellikle 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'yi birleştirir. Temel koyu renkler daha koyu, temel açık renkler ise daha açık hale gelir. %50 gri gibi orta ton renkler bu durumdan etkilenmez.

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

Koyulaştır

darken harmanlama modu, kaynak resmin ve arka plan resminin koyu renk parlaklığını karşılaştırır ve ikisinden en koyu olanı seçer. Bunu her renk kanalı için parlaklık yerine RGB değerlerini karşılaştırarak yapar (multiply ve screen gibi). darken ve lighten ile genellikle bu karşılaştırma sürecinden yeni renk değerleri oluşturulur.

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

Aydınlatma

lighten kullanmak, darken'ün tam tersini yapar.

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

Renk soldurma

color-dodge kullanırsanız arka plan rengi, kaynak rengi yansıtacak şekilde açılır. Saf siyah renkler bu moddan etkilenmez.

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

Renk yanması

color-burn Karışım modu, multiply Karışım moduna çok benzer ancak kontrastı artırır. Bu da daha doygun orta tonlar ve daha az parlak tonlar elde etmenizi sağlar.

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

Sert ışık

hard-light kullanıldığında canlı bir kontrast elde edilir. Bu karışım modu, parlaklık değerlerini filtreler veya çarpar. Piksel değeri% 50'den daha açık griyse resim, filtre uygulanmış gibi aydınlatılır. Daha koyuysa çarpılır.

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

Yumuşak ışık

soft-light karışım modu, overlay modunun daha yumuşak bir sürümüdür. Daha az kontrastla aynı şekilde çalışır.

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

Fark

difference işlevinin işleyiş şeklini, fotoğraf negatifinin işleyiş şekline benzetebiliriz. difference harmanlama modu, her pikselin fark değerini alır ve açık renkleri tersine çevirir. Renk değerleri aynıysa siyah olur. Değerlerdeki farklılıklar tersine çevrilir.

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

Hariç tutulanlar

exclusion kullanımı difference'e çok benzer ancak aynı pikseller için siyah yerine% 50 gri döndürür. Bu da daha az kontrastlı, daha yumuşak bir sonuç verir.

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

Ayrıştırılamayan harmanlama modları

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

Renk tonu

hue harmanlama modu, kaynak rengin tonunu alır ve arka plan renginin doygunluğu ile parlaklığına uygular.

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

Doygunluk

Bu mod, hue gibi çalışır ancak harmanlama 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 harmanlama modu, kaynak rengin ton ve doygunluğu ile arka plan renginin parlaklığından bir renk oluşturur.

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

Parlaklık

Son olarak, luminosity, color'un tersidir. Kaynak rengin parlaklığıyla arka plan renginin ton ve doygunluğunu kullanarak bir renk oluşturur.

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

isolation mülkü

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

isolation mülkünü isolate değerine ayarladığınızda yeni bir yığın bağlamı oluşturulur. Bu bağlam, öğenin arka plan katmanıyla karışmasını engeller. Z-dizin modülünde öğrendiğiniz gibi, yeni bir yığın bağlamı oluşturduğunuzda bu katman temel katman olur. Bu, üst düzey harmanlama modlarının artık geçerli olmayacağı anlamına gelir ancak isolation: isolate ayarlanmış bir öğenin içindeki öğeler hâlâ harmanlanabilir.

Arka plan özelliği zaten izole edildiğinden bu işlemin background-blend-mode ile çalışmadığını unutmayın.

Öğrendiklerinizi test etme

Karışım modları hakkındaki bilginizi test edin

Aşağıdakilerden hangileri CSS karışım modlarıdır?

Aydınlatma
Parlaklaştır
Video içi yer paylaşımlı reklamlar
Fark
Çarp
Dullen

Farklı renkleri farklı şekillerde karıştırmak istiyorsanız hangi tür bir karışım moduna ihtiyacınız olur?

Ayrıştırılamaz
Ayrılabilir