Karışık Modlar

CSS Podcast'i - 024: Karışık Modlar 'nı inceleyin.

Duotone, fotoğrafçılık için popüler bir renk tedavisidir Bu resim, resmin yalnızca iki zıt renkten oluşuyormuş gibi görünmesini sağlar: diğeri ise ışıklar için, diğeri ise düşük ışıklar için. Peki bunu CSS'de nasıl yapabilirsiniz?

Karıştırma modlarını ve öğrendiğiniz diğer teknikleri kullanırken örneğin filtreler ve sözde öğeler: Bu efekti herhangi bir resme uygulayabilirsiniz.

Karışım modu nedir?

Harmanlama modları, Photoshop gibi tasarım araçlarında yaygın olarak kullanılır. kullanarak iki veya daha fazla katmandaki renkleri karıştırarak bir kompozisyon efekti oluşturun. Renklerin karışma şeklini değiştirerek gerçekten ilginç görsel efektler elde edebilirsiniz. Ayrıca karıştırma modlarını yardımcı program olarak da kullanabilirsiniz. beyaz arka planlı bir resmi izole etmek veya şeffaf bir arka plana sahip olur.

Bir tasarım aracında bulunan karıştırma modlarının çoğunu CSS ile birlikte kullanabilirsiniz. her bir arama terimi için mix-blend-mode veya background-blend-mode mülk. mix-blend-mode, harmanlamayı bütün bir öğeye uygular background-blend-mode, harmanlama özelliğini bir öğenin arka planına uygular.

Bir öğede birden fazla arka planınız olduğunda background-blend-mode özelliğini kullanırsınız ve hepsinin birbiriyle uyumlu olmasını istiyorsunuz.

mix-blend-mode, öğenin tamamını etkiler. öğeleri dahil etmektir. Bir kullanım alanı, çift tonlu resmin ilk örneğindedir. sözde öğeleri aracılığıyla öğeye uygulanmış renk katmanlarına sahip olan bir kod snippet'i ekleyin.

Harmanlama modları iki kategoriye ayrılır: ayrılabilir ve ayrılamaz. Ayrılabilir bir karışım modu, farklı renk bileşenlerini dikkate alır. performansları ayrı ayrı görebilirsiniz. Ayırılamayan karışım 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 karıştırma modudur ve bir öğenin diğerleriyle harmanlanmasıyla ilgili hiçbir şeyi değiştirmez.

Çarp

multiply karıştırma modu, birden fazla saydamı birbirinin üzerine yığmak gibidir. Beyaz pikseller şeffaf görünür, ve siyah pikseller siyah görünür. Bunların arasındaki her şey, parlaklık (ışık) değerlerini çarpar. Bu da ışıkların çok daha açık ve koyu hale geldiği anlamına gelir. daha koyu olur. Çoğunlukla daha karanlık bir sonuç verir.

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

Ekran

screen kullanıldığında ışık değerleri, multiply ile ters bir şekilde çarpılır. ve genellikle daha iyi sonuçlar verir.

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

Video içi yer paylaşımlı reklamlar

Bu karıştırma 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 aralıktaki renkler etkilenmez.

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

Koyulaştır

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

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

Lighten

lighten kullanımı darken ile tam tersini yapar.

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

Renk soldurma

color-dodge kullanırsanız arka plan rengi, kaynak rengini yansıtacak şekilde açılır. Saf siyah renklerin bu moddan hiçbir etkisi olmaz.

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

Renk yanması

color-burn karıştırma modu, multiply harmanlama moduna çok benzer. Ancak kontrast artar, bu da orta tonların daha doygun olmasına ve parlak alanların daha az olmasına neden olur.

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

Sert ışık

hard-light kullanımı, canlı bir kontrast oluşturur. Bu karıştırma modu ya eler ya da parlaklık değerlerini çarpar. Piksel değeri% 50 griden daha açıksa resim daha açık olur ve denetlenmiş gibi hissettirebilir. Daha koyuysa çoğaltı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. Daha az kontrastla hemen hemen aynı şekilde çalışır.

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

Fark

difference özelliğinin işleyiş şeklini kavramanın iyi bir yolu, negatif fotoğraf karesinin işleyiş şekline biraz benzer. difference karıştırma modu her pikselin fark değerini alır. ışık renklerinin tersine çevirmesi. Renk değerleri aynıysa siyah olur. Değerlerdeki farklar tersine çevrilir.

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

Hariç tutulanlar

exclusion kullanımı difference ile çok benzerdir, ancak aynı pikseller için siyah değeri döndürmek yerine, %50 gri döndürülür. Bu da daha az kontrastla daha yumuşak bir çıkış elde etmenizi sağlar.

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

Ayırılamayan karışım modları

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

Ton

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

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

Doygunluk

Şunun gibi çalışır: hue, Ancak karıştırma modu olarak saturation kullanıldığında kaynak rengin doygunluğu uygulanır. renk tonuna ve parlaklığına göre ayarlayabilirsiniz.

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

Renk

color harmanlama modu, kaynak rengin tonu ve doygunluğundan bir renk oluşturur arka plan renginin parlaklığını artırır.

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

Parlaklık

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

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

isolation mülkü

isolation özelliğini ayarlarsanız özelliğinin isolate değerine sahip olması gerekir. yeni bir yığın bağlamı oluşturur. Bu, arka plan katmanıyla karışmasını önler. Z-endeksi modülünde öğrendiğiniz gibi, yeni bir yığın bağlamı oluşturduğunuzda bu katman temel katman haline gelir. Bu durumda, ebeveyn düzeyi karıştırma modları artık geçerli olmayacak. ancak isolation: isolate grubu olan bir öğenin içindeki öğeler yine de karışabilir.

Bu seçeneğin background-blend-mode ile çalışmadığını unutmayın çünkü arka plan özelliği zaten izole edilmiş.

Öğrendiklerinizi sınayın

Karma modlarla ilgili bilginizi test edin