CSS3 filter Filtre Efektleri

CSS3 ile birlikte gelen efekt veya filtre eklemek için kullanılan filter özelliğinin kullanımı ile ilgili bilgiler yer almakta.

En basit resim düzenleme editöründe dahi bulunan resmi bulanıklaştırma, resmi siyah beyaz yapma, resmi saydamlaştırma vb. temel efektleri artık css3 filter özelliği sayesinde tek satırda yapabiliyoruz.

CSS filter nedir

CSS filter, CSS3 ile birlikte gelen ve HTML elemanlarına temel resim efektlerini uygulamamızı sağlayan özelliktir.

CSS filter kullanımı

CSS filter kullanımı aşağıdaki gibidir.

img {
    filter: blur(5px);
}

Aldığı değerler;

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

Bulanıklaştırma blur

HTML elemanlarına bulanıklaştırmak için blur değeri kullanılır.

img {
    filter: blur(5px);
}

Parantez içerisinde değer olarak CSS temel ölçü birimlerini (px, ex, em, rem) kullanabiliriz.

.

Parlaklık brightness

HTML elemanlarına parlaklık vermek için brightness değeri kullanılır.

img {
    filter: brightness(300%);
}

Parlaklık değeri olarak 100 değerinin altında verildiğinde parlaklık azalacak 100 değerinin üzerinde değer verildiğinde parlaklık artacaktır.

Parlaklık değeri olarak 100 verildiğinde herhangi bir etki etmeyecektir.

Kontrast contrast

HTML elemanlarına kontrast vermek için contrast değeri kullanılır.

img {
    filter: contrast(300%);
}

Kontrast değeri olarak 100 değerinin altında verildiğinde kontrast azalacak 100 değerinin üzerinde değer verildiğinde kontrast artacaktır.

Kontrast değeri olarak 100 verildiğinde herhangi bir etki etmeyecektir.

Gölge vermek drop-shadow

HTML elemanlarına gölge vermek için drop-shadow değeri kullanılır.

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

Etkisi ve kullanımı CSS3 box-shadow ile aynıdır. box-shadow’dan farkı saydam resimlerde ortaya çıkmaktadır.

Siyah-beyaz yapmak grayscale

HTML elemanlarına siyah-beyaz yapmak için grayscale değeri kullanılır.

img {
    filter: grayscale(50%);
}

0 ile 100 arasında değer almaktadır değer 100 değerine yaklaştıkça siyah-beyaz oranı daha da artacaktır.

Rengi öne çıkart hue-rotate

HTML elemanlarına ait bir rengi öne çıkartmak için hue-rotate değeri kullanılır.

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

Parantez içerisinde öne çıkartılacak renk değeri ve derece (deg) ile kullanılır. 0 ile 360 arasında değer almaktadır.

Renkleri ters çevirmek invert

HTML elemanlarına ait renkleri ters çevirmek için invert değeri kullanılır.

img {
    filter: invert(100%);
}

0 ile 100 arasında değer almaktadır değer 100 değerine yaklaştıkça rengi ters çevirme oranı daha da artacaktır.

Saydamlaştırma opacity

HTML elemanlarını saydam yapmak için opacity değeri kullanılır.

img {
    filter: opacity(50%);
}

0 ile 100 arasında değer almaktadır değer 100 değerine yaklaştıkça daha fazla saydam olacaktır.

Doygunluk saturate

HTML elemanlarına doygunluk-canlılık vermek için saturate değeri kullanılır.

img {
    filter: saturate(800%);
}

Doygunluk değeri 100 değerinin altında verildiğinde doygunluk azalacak ve siyah-beyaz olacaktır.

100 değerinin üzerinde değer verildiğinde doygunluk artacaktır.

Doygunluk değeri olarak 100 verildiğinde herhangi bir etki etmeyecektir.

Eskitme sepia

HTML elamanı eskitme efekti uygulamak için sepia değeri kullanılır.

img {
    filter: sepia(80%);
}

0 ile 100 arasında değer almaktadır değer 100 değerine yaklaştıkça HTML elemanı daha da eskimiş üzerine sarı ve kahverengi şerit çekilmiş gibi olacaktır.

Birden fazla filtre uygulamak

Birden fazla efekt uygulamak için arada boşluk olacak şekilde efektleri  sırasıyla yazmak yeterli olacaktır.

img {
    filter: blur(5px) hue-rotate(120deg);
}

SVG filtresi uygulamak url

Yukarda CSS ile uygulayabileceğimiz bazı efektleri gördük. filter özelliği url değeri SVG ile oluşturulan özel filtreleri HTML elemanlarına uygular.

Daha iyi anlaşılması için aşağıdaki örneğe bakabilirsiniz.

.

CSS3 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.