CSS Dersleri

Harmanlama kipleri (background-blend-mode ve mix-blend-mode)

Fatih Hayrioğlu

29 Ara 2017 — 2 min read

Harmanlama kipleri (blend-mode) grafik işleme araçlarına aşina olanların bildiği bir özelliktir. İki farklı resmi veya yazıyı farklı filtreler ile harmanlayıp güzel tasarım sonuçları çıkaran bir yöntemdir. Bu yöntemi artık CSS ile yapabiliyoruz. CSS'in filter'dan sonra blend-mode özelliği ile iyice grafik işlerini bünyesinde topladı. Harmanlama kiplerini iki farklı özellik ile uygulayabiliriz.

background-blend-mode
mix-blend-mode

background-blend-mode

background-blend-mode özelliği, bir öğeye tanımlanmış ardalan resminin(background-image) ardalan rengiyle(background-color) nasıl harmanlanacağını tanımlar. Grafik işleme araçlarıyla çalışanların aşina olduğu bir resim harmanlama işlemidir. Hemen bir örnek yapalım.

Yukarıdaki örnekte bir katmana atanmış ardalan resim ve ardalan rengi birbiriyle screen blend-mode'u ile birleştirilmiş ve sonuç alınmıştır.

CSS'de 16 çeşit harmanlama kipi vardır. Tek tek aldığı değerleri tanımlamak yerine yukarıdaki örnek üzerinde her birini deneyimlemek daha anlaşılır olacaktır.

Not: Her bir resimde bu değerler farklı sonuçlar verecektir.

Çoklu ardalan resmine blend-mode uygulamak

Yukarıdaki uygulamalar ardalan resmi ile ardalan rengi arasında harmanlama yapıyor. Peki iki resmi birbiriyle harmanlamak mümkünmü? Çoklu ardalan kullanımı sayesinde bu da mümkün. Çoklu ardalan resmi eklediğimiz bir alanda harmanlama yapalım.

Bu özellik ile birçok farklı sonuçlar almak mümkündür. https://codepen.io/search/pens?q=blend-mode örneklerini incelemenizi öneririm.

mix-blend-mode özelliği ile iki elementin harmanlanması

background-blend-mode ile sadece ardalan resmi ile işlem yapabiliyoruz. mix-blend-mode özelliği ile ise herhangi bir HTML elementi ile başka bir HTMlL elementini harmanlama yapabiliyoruz. Bu kullanıma örnek olarak resim üzerine konulan yazıları harmanlama örneklerini gösterebiliriz.

Bir örnek yapalım.

Bİr resmimiz olsun ve bu resmin üzerinde absolute ile çıkardığımız bir metnimiz olduğunu düşünelim. Resim ile metni harmanladığımızda sonuç aşağıdaki gibi olur.

Bir çok farklı efektler elde edilebilir. codepen.io sitesindeki örnekler güzel. İncelemeye değer.

video örneği çok güzel. https://codepen.io/dudleystorey/pen/wavpGe