Özet - Görsel efektler

Filtre ve blend modlarıyla görsel efekt galerisi kurarsın.

İki araç, bir görsel dil

Bu grupta iki farklı araç öğrendin. filter tek bir öğeye bulanıklık, parlaklık, gri tonlama, renk kaydırma ve gölge gibi görsel efektler uygulamanı sağlar.

mix-blend-mode ise bir öğeyi altındaki katmanla nasıl karışacağını söyler; multiply koyulaştırır, screen aydınlatır. Şimdi bu efektleri bir araya getirip bir görsel galeri kuracaksın.

Uygulama Galeri görseline nostalji filtresi

.gallery img seçicisi için bir filter bildirimi yaz. İçinde grayscale(0.5) ve contrast(1.2) işlevleri yan yana, aralarında boşluk olsun.

Örnek çözümü göster

/* galeri görsel filtresi */
.gallery img {
  filter: grayscale(0.5) contrast(1.2);
}

Uygulama Rozeti screen ile aydınlat

.badge seçicisi için mix-blend-mode: screen bildirimini yaz. Rozetin altındaki katmanla aydınlatarak birleşmesi gerekir.

Örnek çözümü göster

/* rozet karışımı */
.badge {
  mix-blend-mode: screen;
}

Kendini test et

Efekti işlevine eşle

blur()

Kenarları yumuşatır
grayscale()

Renksizleştirir
drop-shadow()

Şekle gölge çizer
multiply

Koyulaştırarak karıştırır
screen

Aydınlatarak karıştırır
Saydam arka planlı simgeye gerçek şekle uyan gölge için hangisi?
```
.icon {
  /* hangisi? */
}
```
- filter: blur(2px)
- filter: brightness(1.5)
- filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4))
- mix-blend-mode: multiply
Cevabı göster

filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4)) — Doğru. drop-shadow() saydam alanları atlar ve simgenin gerçek kenarlarına gölge çizer.

Sıradaki ders: Subgrid

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler