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
Aşağıdakilerden hangileri CSS harmanlama modlarıdır?
Farklı renkleri farklı şekillerde karıştırmak isterseniz hangi stil harmanlama moduna ihtiyacınız olur?