Background-blend-mode ve Mix-blend-mode

0
194
views

Ç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:

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:

Örnek Demo

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


2 arkaplan

Kullandığımız resimlerden birincisi

Kullandığımız resimlerden ikincisi

1 oy (4 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikSmiley Tick
Sonraki İçerikBouncyButton
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here