CSS filter Özelliği

CSS filter

Css filter özelliği ile resimlere farklı değerlerde görsel efektler uygulanabilir.

Örnek:

Bu örnekte Resmi filter özelliğiyle tamamen siyah beyaz görünmesini sağladık. (100%)

img { filter: grayscale(100%); /* webkit tarayıcıları için */ -webkit-filter: grayscale(100%); }

CSS filter nedir nasıl kullanılır

CSS filtreleri photoshop’a benzer filtreleri HTML elemanlarına uygulamamızı sağlıyor.

CSS filter	CSS filter özellikleri
Varsayılan Değer:	none
Kalıtsallık:	yok
Animasyon Özelliği:	var
Versiyon:	CSS3
JavaScript filter:	object.style.WebkitFilter="grayscale(80%)"

CSS filter Tarayıcı Desteği

Tablodaki sayılar özelliği destekleyen ilk tarayıcı sürümlerini göstermektedir.

CSS Kodu:
filter	18.0 -webkit-	Desteklenmiyor	35.0	6.0 -webkit-	15.0 -webkit-

CSS filter Değerleri

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

CSS filter özelliği değerleri

CSS filter değerleri	CSS filter değerleri tanımları	CSS örnek uygulamalar
none	Varsayılan değerdir. Efekt uygulanmaz.
blur(px)	Eklenen resimleri bulanıklaştırmak için kullanılabileceğimiz bir filtredir. Daha büyük bir değer daha fazla bulanıklık yaratacaktır .
brightness(%)	Parlaklık değeridir. 0 % görüntü tamamen siyah yapacaktır. % 100 (1) varsayılan değerdir ve orijinal görüntüsünü temsil eder. % 100'ün üzerinde değerler daha parlak sonuçlar verecektir .
contrast(%)	kontrast değerleri ile oynanabilir.. 0 % görüntü tamamen siyah yapacaktır. % 100 (1) varsayılan değerdir ve orijinal görüntüsünü temsil eder. % 100'ün üzerinde değerler daha az kontrasta sahip sonuçlar verecektir .
drop-shadow()	Gölge parametrelerini içerir. h-gölge - Gerekli. Yatay gölge için bir piksel değeri belirtir. Negatif değerler görüntünün solundaki gölge yerleştirin. v-gölge - Gerekli. Dikey gölge için bir piksel değeri belirtir. Negatif değerler yukarıdaki imge gölge yerleştirin. bulanıklık - İsteğe bağlı. Üçüncü bir değerdir ve piksel olmalıdır. Gölge bulanıklık efekti ekler. Daha büyük bir değer daha fazla bulanıklık (gölge daha büyük ve daha hafif olur) yaratacaktır. Negatif değerler izin verilmez. Hiçbir değer belirtilmemişse, 0 (gölgenin kenarı keskin) kullanılır. yayılmış - İsteğe bağlı. Bu dördüncü değerdir ve piksel olmalıdır. Pozitif değerler gölge genişletmek ve daha büyük büyümesine neden olur, ve negatif değerler gölge küçültmek neden olur. Belirtilen değilse, (gölge elemanı olarak aynı boyutta olacaktır) 0 olacak. Not: Chrome, Safari ve Opera ve belki diğer tarayıcılar, bu 4 uzunluğu desteklemez; katma eğer hale olmayacaktır. renk - İsteğe bağlı. Gölge bir renk katar. Belirtilen değilse, renk tarayıcısı (genellikle siyah) bağlıdır. 10px bir bulanıklık etkisi ile, hem yatay hem de dikey olarak 8px büyük kırmızı bir gölge oluşturma bir örnek:
grayscale(%)	Siyah beyaz dengesini düzenleyen değerdir. % 0 (0) varsayılan ve orijinal görüntüsünü temsil eder. % 100 (siyah ve beyaz görüntüler için kullanılır) tamamen gri bir görüntü sağlayacaktır.
hue-rotate(deg)	Hue(renk) renk çemberinde 0 ile 360 arasındaki renklere karşılık gelir. 0 kırmızı, 120 yeşil ve 240 mavidir.
invert(%)	Eklenen resmin görüntüsünün terse çevrilmesini sağlar. Verilen değer resmin ne kadar terse çevrileceğini belirler. 100% değeri resmi tamamen çevirir
opacity(%)	Resimlerin saydamlığını ayarlamızı sağlayan değerdir.
saturate(%)	Görüntünün doygunluğunu ayarlar . (0) 0 % görüntü tamamen un- doymuş yapacaktır. % 100 varsayılan ve orijinal görüntüsünü temsil eder. % 100'ün üzerinde değerler süper doygun sonuçlar sağlar . Not : Eksi değerler izin verilmez.
sepia(%)	kahverengi tonları öne çıkaran eski/antika görünümlü resimler oluşturmamızı sağlar.
url()	Url () işlevi , bir SVG filtre belirten bir XML dosyasının konumunu alır ve belirli bir filtre elemanı bir çapa içerebilir.
initial	Varsayılan başlangıç değerini alır.
inherit	Soybağından gelen değer uygulanır.