CSS Filtresi ve Karışım Modu

Örnek

Tüm resimleri siyah beyaza değiştirin (%100 gri):

img {

  filter: grayscale(100%);

}

Kendin dene İpucu: Aşağıda daha fazla "Kendiniz Deneyin" örneği var.

Tanım ve Kullanım

Özellik filter, bir öğeye (genellikle <img>) görsel efektleri (bulanıklık ve doygunluk gibi) tanımlar.

Demoyu göster ❯

Varsayılan değer:

hiçbiri

Miras:

HAYIR

canlandırılabilir:

Evet. Animasyon hakkında bilgi edinin

Dene

Sürüm:

CSS3

JavaScript sözdizimi:

nesne .style.filter="grayscale(100%)"

Dene

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Ardından -webkit- gelen sayılar, bir önekle çalışan ilk sürümü belirtir.

Property

filter

53.0

18.0 -webkit-

13.0

35.0

9.1

6.0 -webkit-

40.0

15.0 -webkit-

CSS Sözdizimi

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

İpucu: Birden çok filtre kullanmak için her filtreyi bir boşlukla ayırın (Aşağıdaki "Daha Fazla Örnek" bölümüne bakın).

Filtre İşlevleri

Not: Yüzde değerleri (örn. %75) kullanan filtreler, değeri de ondalık olarak (örn. 0,75) kabul eder.

Filter

Description

Demo

none

Default value. Specifies no effects

Demo ❯

blur(px)

Görüntüye bir bulanıklık efekti uygular. Daha büyük bir değer daha fazla bulanıklık yaratacaktır.

Herhangi bir değer belirtilmezse 0 kullanılır.

%0, görüntüyü tamamen siyah yapacaktır.

%100 (1) varsayılandır ve orijinal görüntüyü temsil eder.

Demo ❯

contrast

Possible values:

h-gölge - Gerekli. Yatay gölge için bir piksel değeri belirtir. Negatif değerler, gölgeyi görüntünün soluna yerleştirir

v-gölge - Gerekli. Dikey gölge için bir piksel değeri belirtir. Negatif değerler, gölgeyi görüntünün üzerine yerleştirir.

bulanıklık - İsteğe bağlı. Bu üçüncü değerdir ve piksel cinsinden olmalıdır. Gölgeye bulanıklık efekti ekler. Daha büyük bir değer daha fazla bulanıklık yaratacaktır (gölge daha büyük ve daha hafif hale gelir). Negatif değerlere izin verilmez. Herhangi bir değer belirtilmezse 0 kullanılır (gölgenin kenarı keskindir

yayılma - İsteğe bağlı. Bu dördüncü değerdir ve piksel cinsinden olmalıdır. Pozitif değerler gölgenin genişlemesine ve büyümesine, negatif değerler ise gölgenin küçülmesine neden olur. Belirtilmezse 0 olacaktır (gölge, öğeyle aynı boyutta olacaktır).

Not: Chrome, Safari ve Opera ve belki diğer tarayıcılar bu 4. uzunluğu desteklemez; eklenirse işlenmez.

renk - İsteğe bağlı. Gölgeye renk katar. Belirtilmemişse, renk tarayıcıya bağlıdır (genellikle siyah).

Hem yatay hem de dikey olarak 8 piksel büyüklüğünde, 10 piksellik bir bulanıklık efektiyle kırmızı bir gölge oluşturmaya bir örnek:

filtre: gölge (8px 8px 10px kırmızı); 

İpucu: Bu filtre, box-shadow özelliğine be

Görüntüyü gri tonlamaya dönüştürür.

%0 (0) varsayılandır ve orijinal görüntüyü temsil eder.

%100, görüntüyü tamamen gri yapar (siyah beyaz görüntüler için kullanılır).

Not: Negatif değerlere izin verilmez.

Demo ❯

ton döndürme(derece)

Görüntüye bir ton döndürme uygular. Değer, görüntü örneklerinin ayarlanacağı renk çemberi etrafındaki derece sayısını tanımlar. 0 derece varsayılandır ve orijinal görüntüyü temsil eder.

Not: Maksimum değer 360 derecedir.

Demo ❯

ters(%)

Görüntüdeki örnekleri ters çevirir.

Görüntüyü doyurur.

%0 (0), görüntüyü tamamen doymamış hale getirecektir.

%100 varsayılandır ve orijinal görüntüyü temsil eder.

%100'ün üzerindeki değerler aşırı doygun sonuçlar sağlar.

Not: Negatif değerlere izin verilmez.

Demo ❯

sepya(%)

Görüntüyü sepyaya dönüştürür.

%0 (0) varsayılandır ve orijinal görüntüyü temsil eder.

%100, görüntüyü tamamen sepya yapar.

Not: Negatif değerlere izin verilmez.

Demo

Kendin dene "

Bulanıklaştırma Örneği 2

Bulanık bir arka plan görüntüsü uygulayın:

img.background {

  filter: blur(35px);

}

Kendin dene "

Parlaklık Örneği

Görüntünün parlaklığını ayarlayın:

img {

  filter: brightness(200%);

Kendin dene "Kontrast Örneği

Görüntünün kontrastını ayarlayın:

img {

  filter: contrast(200%);

}

Kendin dene "

Alt Gölge Örneği

Görüntüye gölge efekti uygulayın:

img {

  filter: drop-shadow(8px 8px 10px gray);

}

Kendin dene "

Gri Tonlama Örneği

Görüntüyü gri tonlamaya dönüştürün:

img {

  filter: grayscale(50%);

}

Kendin dene "

Ton Döndürme Örneği

Görüntüye bir ton döndürme uygulayın:

img {

  filter: hue-rotate(90deg);

}

Kendin dene "

Örneği Ters Çevir

Görüntüdeki örnekleri ters çevirin:

img {

  filter: invert(100%);

}

Kendin dene "

Opaklık Örneği

Görüntü için opaklık seviyesini ayarlayın:

img {

  filter: opacity(30%);

}

Kendin dene "

Doymuş Örnek

Görüntüyü doyurun:

img {

  filter: saturate(800%);

}

Kendin dene "

Sepya Örneği

Görüntüyü sepyaya dönüştürün:

img {

  filter: sepia(100%);

}

Kendin dene "

Birden Çok Filtre Kullanma

Birden çok filtre kullanmak için her filtreyi bir boşlukla ayırın. Sıranın önemli olduğuna dikkat edin (yani sepia()'dan sonra grayscale() kullanmak tamamen gri bir görüntü ile sonuçlanacaktır):

img {

  filter: contrast(200%) brightness(150%);

}

Kendin dene "

Tüm Filtreler

Tüm filtre işlevlerinin bir gösterimi:

.blur {

  filter: blur(4px);

}

.brightness {

  filter: brightness(0.30);

}

.contrast {

  filter: contrast(180%);

}

.grayscale {

  filter: grayscale(100%);

}

.huerotate {

  filter: hue-rotate(180deg);

}

.invert {

  filter: invert(100%);

}

.opacity {

  filter: opacity(50%);

}

.saturate {

  filter: saturate(7);

}

.sepia {

  filter: sepia(100%);

}

.shadow {

  filter: drop-shadow(8px 8px 10px green);

}

Kendin dene "