The CSS Podcast - 024: Karışım 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
background-blend-mode
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ü
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?
Farklı renkleri farklı şekillerde karıştırmak istiyorsanız hangi tür bir karışım moduna ihtiyacınız olur?