Hue-rotate ve saturate
hue-rotate() ve saturate() filtrelerini öğrenirsin.
hue-rotate() renkleri kaydırır
hue-rotate() işlevi bir öğenin tüm renklerini renk çemberinde kaydırır. Değer bir açıdır; hue-rotate(90deg) her rengi çeyrek dönüş ileri taşır, hue-rotate(180deg) karşıt renklere çevirir.
Mavi bir görseli mora, yeşili pembeye döndürmek gibi dramatik değişimler tek satırda olur. 0deg ise hiçbir şey yapmaz.
saturate() doygunluğu oynar
saturate() işlevi renk doygunluğunu çoğaltır ya da azaltır. saturate(1) varsayılan, saturate(2) renkleri belirgin biçimde canlandırır, saturate(0.3) ise soluklaştırır.
Yeşil bir yaprağı saturate(1.8) ile yıkayıcı biçimde canlı, saturate(0.5) ile gri tonlu gösterirsin. Sinematik kadrajlar için saturate(0.85) hafif bir yumuşatma verir; abartıdan kaçınmak iyi bir alışkanlıktır.
Renk kaydırma efektleri
Bu gruptaki iki işlev birlikte çalışınca yeni bir görsel dil kurulur. hue-rotate(120deg) ile renkleri kaydırıp ardından saturate(1.5) ile canlandırmak, neon bir tema için tipik bir başlangıçtır.
Aynı sırayı tersine çevirirsen — önce doygunluk, sonra renk kaydırma — sonuç yine canlı ama farklı bir palet verir. Ton arayışı bu küçük sıra denemelerinden doğar.
Uygulama Neon temayı iki işrevle kur
.neon seçicisi için tek bir filter bildirimi yaz. İçinde önce hue-rotate(120deg), sonra saturate(2) işlevleri yan yana, aralarında boşluk olsun.
Örnek çözümü göster
/* neon tema filtresi */
.neon {
filter: hue-rotate(120deg) saturate(2);
}Kendini test et
-
hue-rotate(180deg) ne yapar?
.tile { filter: hue-rotate(180deg); }- Renkler bir çeyrek dönüş kayar
- Renkler aynı kalır
- Renkler hafifçe parlaklaşır
- Renkler karşıt tonlarına döner
Cevabı göster
Renkler karşıt tonlarına döner — Doğru. 180deg yarım dönüş demektir; her rengi çember üzerinde karşıt tonuna taşır.
-
Neon yazıya doygunluk ver
.neon { filter: ____; }Cevabı göster
.neon { filter: saturate(2); } -
Çağrıyı sonucuna eşle
- hue-rotate(180deg)
- Karşıt renklere döndürür
- saturate(2)
- Renkleri canlandırır
- hue-rotate(0deg)
- Renkler aynı kalır
- saturate(0.3)
- Renkleri soluklaştırır