Arama

CSS Filter Özelliği

  • Paylaş:
post-title

Bugün CSS 3 ile birlikte gelen filter özelliğini örneklendiriyoruz, buyruunn

Merhaba arkadaşlar;

CSS 3 ile birlikte gelen bir diğer güzel özellikte resim dosyalarımıza temel efektleri ve filtreleri ekleyebilmemiz oluyor. Bunu filter özelliği ile birlikte yapıyoruz. Filter özelliği ile aşağıdaki efektlerin hepsini yapabiliriz;

- blur() : Resmin netliğini değiştirir

img{
	filter:blur(5px);
}

- brightness() : Resmin parlaklığını değiştirir

img{
	filter:brightness(200%);
}

- contrast() : Resmin kontrastını değiştirir

img{
	filter: contrast(200%);
}

- drop-shadow() : Resmin çerçevesine gölge verir 

img{
	filter: drop-shadow(8px 8px 10px red);
}

- grayscale() : Resmi gri tonlara çevirir

img{
	filter: grayscale(50%);
}

- hue-rotate() : Renk rotasyonu sağlar

img{
	filter: hue-rotate(90deg);
}

- invert() : Resim renklerini ters yapar

img{
	filter: invert(100%);
}

- opacity() : Resmin opasitesini (görünürlüğünü) değiştirir

img{
	filter: opacity(30%);
}

- saturate() : Resmin doygunluğunu değiştirir

img{
	filter: saturate(800%);
}

- sepia() : Resme sepya efektini uygular

img{
	filter: sepia(100%);
}

 

Konuda takıldığınız bir yer olursa yorum kısmından sorabilirsiniz arkadaşlar.

Bu bilgilerden daha çok programcının yararlanması için lütfen konuyu paylaşmayı unutmayalım smiley

Etiketler:
Bir yorum bırak