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.

Yapısı : background-blend-mode: [ deger ]
Aldığı Değerler : normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Başlangıç değeri: normal
Uygulanabilen elementler: Tüm elementler
Kalıtsallık: Yok

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

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar

CSS Değişkenleri (Custom Properties)

CSS Değişkenleri (Custom properties - Custom Variables) hakkında bilmeniz gerekenler. Devamını oku

ES6 ile DOM'dan bir eleman silmek

15 May 2018 tarihinde yayınlandı.

Tarayıcı Dünyası

07 May 2018 tarihinde yayınlandı.