Filter özelliği

CSS kursu · İleri seviye · Ders 13/52

filter: blur, brightness, contrast fonksiyonlarını öğrenirsin.

Filter özelliği nedir?

CSS'te filter özelliği, bir öğenin görünümünü önceden tanımlı işlevlerle değiştirir. Bulanıklaştırma, parlaklık, zıtlık gibi efektler tek satırda uygulanır.

Yazımı filter: blur(2px); biçimindedir: işlev adı, parantez, değer. Birden çok işlevi aralarına boşluk bırakarak yan yana yazabilirsin.

Bu özellik özellikle görseller ve çizimler üzerinde dramatik değişiklikler için idealdir; orijinal dosyaya dokunmadan tüm sayfada anında etki eder.

blur() yumuşaklık verir

blur() işlevi, bir öğeye gauss bulanıklığı uygular. Değer piksel cinsinden bir yarıçaptır; blur(0) etkisizdir, blur(4px) hafif, blur(12px) belirgin bir puslu görünüm verir.

Büyük değerler öğenin kenarlarını aşar; bu yüzden bulanık öğenin etrafında yer açmak iyi bir alışkanlıktır. Koyu bir arka plan, hafif bulanıklığı daha okunaklı kılar.

brightness ve contrast

brightness() öğenin parlaklığını ayarlar. brightness(1) varsayılan, brightness(0.5) yarı karanlık, brightness(1.6) belirgin biçimde aydınlık yapar. Bu işlev sayfa üstündeki vurgulu görselleri öne çıkarmak için de kullanışlıdır.

contrast() ise koyu ve açık tonlar arasındaki farkı denetler. contrast(1.5) renkleri keskinleştirir; contrast(0.8) soluklaştırır. İkisini birlikte kullanmak görseli sinematik bir tona taşır.

Uygulama Fotoğrafa iki işlevli filtre ver

.photo seçicisi için tek bir filter bildirimi yaz. İçinde blur(3px) ve brightness(1.1) işlevleri yan yana, aralarında boşluk olsun.

Örnek çözümü göster

/* fotoğraf filtresi */
.photo {
  filter: blur(3px) brightness(1.1);
}

Kendini test et

Fotoğrafa hafif bulanıklık ver

.photo {
  filter: ____;
}

Cevabı göster

.photo {
  filter: blur(2px);
}

Hangisi görselin parlaklığını artırır?
```
.photo {
  filter: brightness(0.4);
}
```
- brightness(0.4)
- brightness(1)
- brightness(1.8)
- brightness(0)
Cevabı göster

brightness(1.8) — Doğru. 1'in üstündeki değerler parlaklığı artırır; 1.8 belirgin biçimde aydınlık bir sonuç verir.
İşlevi etkisine eşle

blur()

Kenarları yumuşatır
brightness()

Parlaklığı ayarlar
contrast()

Ton farkını keskinleştirir
filter

Bu efektlerin taşıyıcı özelliği

İleri seviye bölümündeki tüm dersler

Filter özelliği