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.  

Yorumlar

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

CSS top Özelliği

Javascript ile neler yapılabilir

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS align-self özelliği

HTML5 Canvas Oyun Yapımı Dersleri