Background-blend-mode ve Mix-blend-mode

Çok uzun süre ara verince haliyle yeni çıkan web teknolojilerinden de haberdar olamıyoruz. Css3 ilk çıktığından bu yana oldukça gelişti ve çoğu örneği resimlerle yada javascript kullanarak yapmak gerekiyorken artık sadece stil dosyalarında değişiklik yaparak istediğimiz tasarımı elde edebiliyoruz.

Sürekli photoshop kullananlar Blend Mode özelliğinin ne olduğunu az çok bilirler. Css3 ile beraber yeni gelen özelliklerden biri olan blend-mode özelliği de resimlerde
uyguladığımız efektleri css kullanarak elde etmemize  yardımcı oluyorlar.

İşte size blend mode ile hazırlanmış bir örnek.

Blend-Mode Özellikleri

mix-blend-mode

Oluşturduğunuz divlerin (çerçeve) blend mode kuralları kullanılarak iç içe gözükmesini sağlar. Css içinde kullanabileceğiniz kuralları aşağıdaki gibidir. Her bir satırı, değişiklik yapmadan, kendi css kodunuza ekleyerek kullanabilirsiniz. Yukarıda vermiş olduğumuz örnekte de mix-blend-mode özelliği kullanılmıştır. Örnek demo olarak bakabilirsiniz.

Kurallar:

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Genel değerler */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

background-blend-mode

Background-blend-mode  özelliği de iki farklı arkaplan resmi eklenmiş sayfalarda resimlerin iç içe görünmesini sağlar tabi bu iç içe görünme şekli photoshop ve benzeri programlarda kullanılan blend modu özelliği ile aynıdır. Yani iki resmi şeffaflaştırıp üst üste göstermek yerine seçilen değerler doğrultusunda renklerin birbirine karışıp daha farklı renkler çıkmasına yarar. Şimdilik aklıma bu örnekle oluşturulabilecek mükemmel tasarımlar gelmiyor ama blend mode ile ortaya çok güzel sonuçların çıkabileceğini ispatlayan örneklerle karşılaşacağız ilerleyen zamanlarda.

Kurallar:

background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;

/* Genel değerler */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

Örnek Demo

Normal yazan yerde kurallar sıralıdır. Teker teker deneyip sonucu görebilirsiniz.

2 arkaplan

background: 
url('https://www.mintik.com/wp-content/uploads/2017/03/1.png'),
url('https://www.mintik.com/wp-content/uploads/2017/03/2.png');

Kullandığımız resimlerden birincisi

Kullandığımız resimlerden ikincisi