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

Sıradaki ders: Drop-shadow

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler