CSS Karışım Modları Nasıl Kullanılır?

CSS karışım modları, doğrudan tarayıcınızın içine görüntü efektleri eklemenin kolay bir yoludur.

Bu nedenle, bir görüntü düzenleme yazılımı çözümünden fotoğrafları düzenlemenin ve ardından kaydetmenin geleneksel yolu her zaman gerekli değildir. Tasarımcılar olarak, Adobe Photoshop gibi araçlarla görüntülere efektler eklemek için sayısız saat harcadık. Bu öğreticiyi incelerken, pek çok seçeneğin Photoshop'takilere benzediğini fark edeceksiniz, ancak artık bunlar CSS stilinin verimliliğiyle yapılabilir.

Tarayıcı karışım modları, görüntü düzenleme yazılımı ihtiyacını tamamen ortadan kaldıracak mı? Tamamen değil ve kesinlikle henüz tam olarak değil. Ancak CSS ve tarayıcı desteği, görüntüleri düzenlemenin yeni yollarını desteklemekte uzun bir yol kat etti. CSS ve SVG kırpma ve maskeleme, karışım modları, 3B Dönüşüm ve daha fazlası, görüntü düzenleme yazılımına olan bağımlılığımızı kesinlikle azaltabilir. Tarayıcılar daha sofistike hale geldikçe, çok daha fazla potansiyel göreceğiz ve (umarız) Photoshop'ta daha az zaman harcayacağız.

CSS Karışım Modları ve CSS Karışım Karışım Modları

Bu eğitim, CSS karışım modlarını ve bunların nasıl kullanıldığını kapsayacaktır. Başlamak için, bilmeniz gereken birkaç farklı seçenek var. Biri background-blend-mode ile bir efekt, diğeri ise mix-blend-mode ile.

background-blend-mode property kullanarak, bir öğenin arka plan katmanlarını (görüntü veya renk) karıştırabilirsiniz. Karıştırma modları bir değer olarak tanımlanır ve arka plan görüntüsünün renklerinin arkasındaki renk veya diğer arka plan görüntüleri ile nasıl karıştırılacağını veya karıştırılacağını belirtir.

Arka plan öğeleriyle değil, biraz harmanlama yapmak isterseniz ne olur? Öğeler mix-blend-mode özelliği kullanılarak birlikte karıştırılabilir. Bu özellik, harmanlamanın yığınlanmış HTML öğeleri arasında nasıl olması gerektiğini açıklar. Çakışan katmanlardaki öğeler, altındakilerle karışır. Tüm resimler, metinler, kenarlıklar veya başlıklar bu özellikten etkilenir.

Adobe Photoshop Çarpma Örneği

Bir görüntü düzenleyicide karışım modlarını göstermenin geleneksel yoluna bir göz atmak, bize CSS karışım modlarıyla neler başarabileceğimiz konusunda bir fikir verir. Aşağıdaki fotoğraf Adobe Photoshop'ta oluşturuldu. Görüntü, üzerinde kırmızı bir katman bulunan kendi arka plan katmanındadır. Kırmızı katman için "Çarp" olan bir karıştırma modu seçildi. Gördüğünüz gibi kırmızı bir kaplama var. Bu efekti elde etmek için Adobe Photoshop, "Çarp" uygulanmış katmandaki renkleri alır, altındaki katman(lar)daki renklerle çarpar ve sonucu göstermek için 255'e böler.

Aynı etki, daha hızlı özelleştirme ve kolay güncelleme sağlayan CSS ile elde edilebilir.

CSS Karışım Modunun Temel Örneği

Karıştırma modlarının nasıl çalıştığını görmek için basit bir örnek, görüntüyü a ile background-color karıştırmaktır. İlk olarak, görüntünün URL yolunun bildirilmesi, ardından bir rengin belirtilmesi gerekir. Bunlara karar verildikten sonra karışım modunun seçilmesi gerekir. Bu karışım modunun background-image görünümünü nasıl etkilediğini göstermek için burada Çarpma seçilmiştir.

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Karıştırma modu, katmanlar üst üste bindiğinde bir pikselin son renk değerinin hesaplanma şeklidir. Her karışım modu, ön planın ve arka planın renk değerini (üst renk ve alt renk) alır, değerini hesaplar ve bir renk değeri döndürür. Nihai, görünür katman, karıştırılan katmanlar arasındaki örtüşen her pikselde karışım modu hesaplamasının sonucudur.

Çarp, çok popüler bir karıştırma modudur, ancak başka kullanılabilir karıştırma modu seçenekleri de vardır: ekran, kaplama, koyulaştırma, aydınlatma, renk soldurma, renk yakma, sert ışık, yumuşak ışık, fark, dışlama, ton, doygunluk, renk ve parlaklık. Eğer “normal” belirtilirse, bu her şeyi sıfırlayacaktır. Her bir karışım modunun ayrıntılarını tek tek incelemek yerine, nihai sonucun ne olacağını belirlemenin en iyi yolu onlarla deney yapmaktır.

İki Görüntülü Arka Plan Karışım Modu

Bir görüntünün üzerine renk bindirmek yerine, iki görüntüyü bir araya getirmek oldukça güzel bir etki yaratabilir. CSS bildirimine iki arka plan resmi eklemek kadar kolaydır. Bir sonraki seçenek, bir arka plan rengine sahip olmak (veya olmamak). Arka plan rengi istemiyorsanız, bu kaldırılabilir ve seçtiğiniz karışım moduna bağlı olarak görüntüler birbirine karışır.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Arka Plan karışım modlarında Degrade

Tek bir renk kullanmak yerine, degradeler bazı benzersiz efektler de verebilir.

 .resim üzerinde gradyan {
 arka plan:
 lineer gradyan(mor %0, kırmızı %80),
 linear-gradient(sağa doğru, mor %0, sarı %100), url("resim.jpg");
 arka plan harmanlama modu: ekran, fark, aydınlatma;
 } 

Ayrıca, bu örneğin birden çok arka plan karıştırma moduna sahip olduğunu da fark edeceksiniz. Bir karışım modu yeterli değilse, birden fazla kullanılabilir.

Çalışma örnekleri bu Codepen'de bulunabilir.

Karışım Modu Örneklerini Karıştırın

Bu noktaya kadar, odak arka planda olmuştur. Sayfadaki diğer öğeler karışım modlarından yararlanmak isterse ne olur? Bu sorun değil ve aynı karışım modu tipleri mevcuttur.

Başlangıç, kalıtım ve ayarlanmamış modlar dışında background-blend-modes her şey aynı görünür.

• Başlangıç: Bir karışım modu ayarlamayan özelliğin varsayılan ayarı.
• Devral: Karışım modunu üst öğesinden devralır.
• Unset: Karışım modunu bir öğeden kaldırır.

İzolasyonlu Karma Karışım Modunun Temel Örneği

mix-blend-mode ile çalışırken, biraz izolasyon yapma ihtiyacıyla karşılaşacaksınız. İlk olarak, "istiflemenin" mümkün olduğunu bilmek önemlidir ve bu çok sayıda katmanla çalışırken değerlidir. Bir yığın kutu düşünün. Her kutu gruptan ayrıdır. Her kutunun içinde birden çok öğe katmanı olabilir. Bu düşünce tarzı, neyin izole edilmesi gerektiğini belirlerken yardımcı olacaktır.

Mix-blend-modu ile Metin ve Görüntü Karıştırma

Bu örnekte, img-wrap sınıfına sahip div görüntüyü içerir. Görüntü, bir mix-blend-mode sahiptir. Yani temel olarak, görüntü arka plana düşüyor gibi görünüyor.

Bunu önlemek için, img-wrap div (başlık metnini de içerir), gövde öğesinin arka planından ayrı olacak şekilde yeni bir yığılmış içerik kümesi olmalıdır. Bu izolasyon özelliği ile yapılır. Varsayılan değer auto'dur, yani isolation: isolate; eklenmesi gerekecek.

Bunu test etmek için div izolasyon özelliğini .img-wrap sınıfıyla yorumlayın ve sonucu kontrol edin.

İşte HTML'dir:

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

İşte CSS. .img-wrap üzerindeki isolate çok dikkat edin.

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

Çalışan örnek Codepen'de bulunabilir.

Mix-blend-modu ile Metin Kesme

Karışık karışım modlarıyla bazı ilginç tip efektler oluşturulabilir. Metni kesmenin kolay bir yolu var. Arka plan, h1 öğesindeki bir dolgu ile gizlenir.

İşte HTML'dir:

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

<div> içeren, orman arka plan görüntüsü ile doldurulur.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

İçindeki başlık, isteğe bağlı bir arka plan rengiyle stillendirilir. Çarpmanın mix-blend-mode kullanılarak başlık, yarı şeffaf arka plan görüntüsüyle birlikte bir şeffaf efekte sahiptir:

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

Çalışan örnek Codepen'de bulunabilir.

Mix-blend-modu ve SVG

SVG dosyaları web'de çok popülerdir ve CSS karıştırma modları da bunlarla iyi çalışır. Şekiller, istenen karışım modunu vermek için kolayca hedeflenebilir.

İzolasyon bu örnekte de anahtardı. Daireleri ayırmadan, gri arka plan müdahale ederdi.

Daire grubunu oluşturmak için kod aşağıdadır:

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

İşte CSS stilleri:

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Bu örnek Codepen'de bulunabilir.

Arka Plan harmanlama modu ve Karışık harmanlama modu için Tarayıcı Desteği

Tarayıcı desteği oldukça iyidir, ancak arka plan harmanlama modu için tamamen tutarlı değildir. Bu özelliği kullanan bir tasarıma başlamadan önce, Kullanabilir miyim'i kontrol ettiğinizden emin olun. Şu anda Edge ve Safari'de destek yok. Sınırlı destekle başa çıkmak için ve hangi tarayıcıların desteklenmesi gerektiğine bağlı olarak bir CSS Özellik Sorgusu iyi bir seçenek olabilir. Değilse, "harmanlanmış" görüntüleri bir geliştirme (gereklilik değil) olarak düşünmek en iyi seçeneğiniz olabilir.

Tarayıcı desteği, mix-blend-modu için biraz daha iyidir. Kısmi desteğin farkında olmak iyidir. Örneğin, Safari tonu, doygunluğu, rengi veya parlaklığı desteklemez.

Karışım modlarıyla nelerin tasarlanabileceğini gerçekten öğrenmenin en iyi yolu deney yapmaktır. Burada gösterilen örnekler sadece yüzeyi çizdi. Karışım modları kullanılarak ne tür grafiklerin oluşturulabileceği şaşırtıcı. Bu, web'de yapılabilecekler için ileriye doğru atılmış harika bir adımdır.

WP Engine ile Yaratma Özgürlüğünü Güçlendirin

WP Engine, WordPress'te yaratma özgürlüğüne güç verir. Tüm WordPress sağlayıcıları arasında en hızlısı olan şirketin ürünleri, 1,5 milyon dijital deneyime güç veriyor. Dünyanın en iyi 200.000 sitesinden daha fazlası, dijital deneyimlerini güçlendirmek için WordPress'teki herkesten daha fazla WP Engine kullanıyor. Daha fazlasını wpengine.com adresinde bulun veya bugün bir temsilciyle görüşün!