Grayscale ve sepia

grayscale() ve sepia() filtrelerini öğrenirsin.

grayscale() renksizleştirir

grayscale() işlevi bir öğenin renk doygunluğunu düşürür. grayscale(0) renkli, grayscale(1) tamamen siyah-beyaz, grayscale(0.5) soluk bir ara ton verir.

Bu etki portre ve manzara görsellerinde hüzünlü bir hava yaratır. Üzerine gelince renklenen kart görselleri için de temel bir tekniktir: varsayılan gri, üzerine gelince renkli.

sepia() sıcak ton verir

sepia() işlevi öğeyi sıcak kahverengi tonlara çalar. sepia(1) eski bir fotoğraf görünümü, sepia(0.5) hafif kehribar bir his verir; sepia(0) ise renkleri olduğu gibi bırakır.

Eski anı sayfalarında, vintage kart temalarında ve retro düğmelerde sıklıkla karşılaşırsın. Üzerine gelince renklenen görsellerde varsayılan ton olarak da işe yarar.

İki işlevi aynı bildirimde kullanmak

grayscale() ve sepia() işlevlerini aynı filter bildiriminde yan yana kullanabilirsin. Sıralama önemlidir: önce grayscale(0.6), sonra sepia(0.4) yazarsan sonuç, önce renksizleştirilmiş sonra kahverengiye çekilmiş bir görseldir.

Sırayı değiştirince tonlar farklı görünür; bu yüzden istediğin etkiye ulaşana kadar işlev sırasını denemek gerekir.

Uygulama Vintage görseli iki işlevle karıştır

.vintage seçicisi için tek bir filter bildirimi yaz. İçinde önce sepia(0.7), sonra grayscale(0.3) işlevleri yan yana, aralarında boşluk olsun.

Örnek çözümü göster

/* vintage görsel filtresi */
.vintage {
  filter: sepia(0.7) grayscale(0.3);
}

Kendini test et

Aynı bildirimi grayscale(1) olarak değiştirince ne olur?
```
img {
  filter: grayscale(0);
}
```
- Görsel belirgin biçimde parlaklaşır
- Görsel tamamen siyah-beyaza döner
- Görselin kenarları bulanıklaşır
- Görsel yatayda döner
Cevabı göster

Görsel tamamen siyah-beyaza döner — Doğru. grayscale(1) tüm renk doygunluğunu sıfıra indirir ve siyah-beyaz bir görünüm verir.

Vintage görsel için sepia tonu

.vintage {
  filter: ____;
}

Cevabı göster

.vintage {
  filter: sepia(0.7);
}

Değeri etkisine eşle

grayscale(1)

Tamamen siyah-beyaz
sepia(1)

Eski fotoğraf görünümü
grayscale(0)

Renkli kalır
sepia(0)

Renkler değişmez

Sıradaki ders: Hue-rotate ve saturate

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler