CSS‘in yeni elemanlarından biri de blend-mode tanımı. Özellikle grafik tasarım programlarından aşina olduğumuz bu stil yapısı artık CSS tarafından da destekleniyor.
Bu özellik 2 farklı öğenin üstüste renkleri karıştırılmış bir halde kullanmamızı sağlıyor. Tabii bunun için kullanmamızı bekleyen onlarca seçenek mevcut. Hazırsanız başlayalım.
Blend mode nasıl kullanır?
Daha önce de bahsettiğimiz gibi birden fazla öğenin üstüste gelmesinde karışan renk paletleri diye özetleyebiliriz background-blend-mode‘u. Basit bir yenilik gibi öngörülsede bu yapının masaüstü yayıncılık ve grafik tasarım alanında yarattığı devrim gibi değişikliği unutmamak gerekir. Kuşkusuz web tarafında da bu etki yaratacak işlemci gücünü anlık kullanma handikapına rağmen.
Üstteki gibi default halde barınan background-blend-mode birçok ayrı değerle tanımlanabiliyor. Bu değerler şöyle : multiply,screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color ve luminosity.
Aşağıdaki örnekte sarı renkte bir plan üzerine uygulanmış blending modları görebiliyoruz.
Bu özellik 2 farklı öğenin üstüste renkleri karıştırılmış bir halde kullanmamızı sağlıyor. Tabii bunun için kullanmamızı bekleyen onlarca seçenek mevcut. Hazırsanız başlayalım.
Blend mode nasıl kullanır?
Daha önce de bahsettiğimiz gibi birden fazla öğenin üstüste gelmesinde karışan renk paletleri diye özetleyebiliriz background-blend-mode‘u. Basit bir yenilik gibi öngörülsede bu yapının masaüstü yayıncılık ve grafik tasarım alanında yarattığı devrim gibi değişikliği unutmamak gerekir. Kuşkusuz web tarafında da bu etki yaratacak işlemci gücünü anlık kullanma handikapına rağmen.
Kod:
background-blend-mode:normal;Üstteki gibi default halde barınan background-blend-mode birçok ayrı değerle tanımlanabiliyor. Bu değerler şöyle : multiply,screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color ve luminosity.
Aşağıdaki örnekte sarı renkte bir plan üzerine uygulanmış blending modları görebiliyoruz.
Kod:
https://codepen.io/lykiadesign/pen/yjywbP