PricingLoginStart free
CSS Academy · Ders

Katman Harmanlama için mix-blend-mode

CSS'de Photoshop tarzı harmanlama modlarını kullanarak öge renklerini alttaki içerikle harmanlayın.

3. ders / 413 adım

Katman Harmanlama için mix-blend-mode, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

mix-blend-mode nedir?

mix-blend-mode, bir öğenin piksellerinin altındaki öğelerin pikselleriyle nasıl karışacağını denetler; Photoshop katman karıştırma modlarına benzer. Öğenin arka planı da dâhil olmak üzere tamamını etkiler.

Normal (Varsayılan)

normal varsayılandır; karıştırma yapılmaz. Üstteki öğe, altındaki her şeyi kaplar.

multiply

multiply, piksel değerlerini çarparak görüntüyü koyulaştırır. Beyaz saydamlaşır; siyah siyah kalır. Koyu tonlu görselleri renkli arka planların üzerine yerleştirmek için idealdir.

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

screen

screen, multiply'ın tersidir; görüntüyü aydınlatır. Siyah saydamlaşır; beyaz beyaz kalır. Işık efektleri ve parlamalar için uygundur.

<div class="blend-wrapper">
  <div class="glow"></div>
</div>

overlay

overlay, multiply ve screen'i birleştirir. Koyu alanlar daha da koyulaşır, açık alanlar daha da aydınlanır. Orta tonları korurken karşıtlığı artırır.

<div class="blend-wrapper">
  <div class="texture"></div>
</div>

difference

difference, renkleri birbirinden çıkarır. Aynı renkler siyah, zıt renkler beyaz oluşturur. Psikedelik ve yüksek karşıtlıklı efektler meydana getirir.

<div class="blend-wrapper"><span class="inverted-text">Invert Me</span></div>

Hard Light ve Soft Light

hard-light, kaynak renge bağlı olarak multiply veya screen uygular. soft-light, karşıtlık artışı daha düşük olan daha yumuşak bir sürümdür.

Renk Karıştırma Modları

Bu modlar yalnızca belirli renk özelliklerini karıştırır:

  • hue — tonu üstteki öğeden, doygunluk ve açıklığı alttaki öğeden alır
  • saturation — doygunluğu üstteki öğeden alır
  • color — ton ve doygunluğu üstteki öğeden, açıklığı alttaki öğeden alır
  • luminosity — açıklığı üstteki öğeden alır

İki Tonlu Görseller için Color Modu

Renkli bir öğeyi mix-blend-mode: color ile katmanlayarak iki tonlu görseller oluşturun:

<div class="duotone"></div>

Ters Renkli Metin Efekti

Her arka planda ters renkli görünen metin:

<div class="blend-wrapper"><span class="inverted-label">Adaptive Label</span></div>

Yığınlama Bağlamları ve Karıştırma Modu

mix-blend-mode, aynı yığınlama bağlamındaki öğelerle karışır. Bir üst öğedeki isolation: isolate özelliği yeni bir yığınlama bağlamı oluşturur ve karıştırma modlarının yalıtılmış grubun dışındaki öğeleri etkilemesini önler.

Kısa Kontrol

Bir öğenin beyaz bölümlerini saydam yapan ve renkli ya da koyu alanları koruyan, saydam kâğıt benzeri karıştırma modu hangisidir?

İnteraktif derste cevapla

Özet

mix-blend-mode, öğe piksellerini alttaki içerikle karıştırır. Temel modlar şunlardır: multiply (koyulaştırır, beyazı saydama dönüştürür), screen (aydınlatır, siyahı saydama dönüştürür), overlay (karşıtlığı artırır), difference (çıkarma işlemi yapar) ve color (görselleri yeniden renklendirir). Karıştırma kapsamını sınırlandırmak için üst öğede isolation: isolate kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle CSS öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
40
Dersler
159
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Katman Harmanlama için mix-blend-mode” dersi ücretsiz mi?

Evet — “Katman Harmanlama için mix-blend-mode” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Katman Harmanlama için mix-blend-mode” dersinde ne öğreneceğim?

CSS'de Photoshop tarzı harmanlama modlarını kullanarak öge renklerini alttaki içerikle harmanlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Katman Harmanlama için mix-blend-mode” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. filter: blur brightness contrast grayscale
  2. Buzlu Cam için backdrop-filter
  3. Katman Harmanlama için mix-blend-mode
  4. isolation Özelliği
← CSS Academy Sayfasına Dön