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