Ö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.