Mix-blend-mode
mix-blend-mode ile karışım modlarını öğrenirsin.
mix-blend-mode nedir?
mix-blend-mode özelliği, bir öğenin altındaki katmanla nasıl karışacağını belirler. Yazımı mix-blend-mode: multiply biçimindedir; değer bir anahtar sözcüktür.
Bu özellik filter'den farklı olarak yalnızca öğeyi değil, öğeyi arka planıyla birlikte düşünür. Üst üste binen renklerin gerçek karışımını verir; bu yüzden kaplamalar, rozetler ve tipografik efektlerde sıkça karşılaşırsın.
screen modu aydınlatır
screen modu multiply'nin tersidir. Her renk kanalını ters çevirip çarpar, sonra tekrar ters çevirir; sonuç her zaman daha aydınlıktır.
Siyah bir kaplamayı mix-blend-mode: screen ile yerleştirirsen siyah yok olur, yalnızca açık tonlar görünür. Bu yüzden parlak ışık efektleri, duman ve kıvılcım gibi öğelerde idealdir.
Üst üste binen öğelerde karışım
mix-blend-mode en güçlüsünü, üst üste binen öğelerle çalışırken verir. Renkli bir kaplama, altındaki görselle birleşerek yeni bir üçüncü ton doğurur.
Örneğin mor bir kaplamayı mix-blend-mode: multiply ile bir fotoğrafın üstüne koyarsan, fotoğrafın aydınlık yerleri hafif mor, karanlık yerleri derin mor görünür. Bu, sahne içi yazılar ve başlık şeritleri için çok kullanışlı bir tekniktir.
Uygulama Kaplamayı multiply ile karıştır
.overlay seçicisi için mix-blend-mode: multiply bildirimini yaz. Öğe, altındaki katmanla çarpılarak birleşsin.
Örnek çözümü göster
/* kaplama karışımı */
.overlay {
mix-blend-mode: multiply;
}Kendini test et
-
multiply modu ne yapar?
.overlay { mix-blend-mode: multiply; }- Üstteki renkleri alttaki ile çarpar; sonuç daha koyu olur
- Renkleri beyazla birleştirir; sonuç daha parlak olur
- Yalnızca kenarlara gölge çizer
- Renkleri tamamen siyah-beyaza çevirir
Cevabı göster
Üstteki renkleri alttaki ile çarpar; sonuç daha koyu olur — Doğru. multiply her kanaldaki renk değerini çarpar; alttaki ile birleşince sonuç her zaman daha koyudur.
-
Kaplamayı multiply ile karıştır
.overlay { ____: multiply; }Cevabı göster
.overlay { mix-blend-mode: multiply; } -
Modu ve özelliği görevine eşle
- multiply
- Daha koyu ton
- screen
- Daha aydınlık ton
- mix-blend-mode
- Karışım kapsayıcı özellik
- filter
- Tek öğeye görsel efekt