CSS3 filter Filtre Efektleri

CSS3 birçok kolaylık sağlayacak yenilikleri beraberinde getirdi. CSS3 dersleri bölümünde css3 ile gelen yenilikleri anlatmaya çalışıyorum. Bu yazımda çeşitli resim editörleri ile uyguladığımız resim filtrelerini HTML elemanlarına uygulamamızı sağlayan CSS filter özelliği ve CSS filter kullanımını anlatacağım.

En basit resim düzenleme editörlerinde 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.

Tarayıcı Desteği

Tablodaki değerler css3 filter özelliğini destekleyen ilk tarayıcı sürümlerini belirtmektedir.

Özellik Chrome IE / Edge Firefox Safari Opera
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

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 elamanını 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. Yüksek değer verdikçe filtre uygulanan eleman daha bulanık hale gelecektir.

.

Parlaklık brightness

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

img {
    filter: brightness(300%);
}

Parantez içerisinde parlaklık değeri ve yüzde(%) ile kullanılır. 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 elamanına kontrast vermek için contrast() değeri kullanılır.

img {
    filter: contrast(300%);
}

Parantez içerisinde kontrast değeri ve yüzde(%) ile kullanılır. 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 elamanı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 elamanını siyah-beyaz yapmak için grayscale() değeri kullanılır.

img {
    filter: grayscale(50%);
}

Parantez içerisinde siyah-beyaz değeri ve yüzde(%) ile kullanılır. 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 elemanı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 elemanına ait renkleri ters çevirmek için invert() değeri kullanılır.

img {
    filter: invert(100%);
}

Parantez içerisinde renkleri ters çevirme değeri ve yüzde(%) ile kullanılır. 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 elamanını saydam yapmak için opacity() değeri kullanılır.

img {
    filter: opacity(50%);
}

Parantez içerisinde saydamlık değeri ve yüzde(%) ile kullanılır. 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 elamanına doygunluk-canlılık vermek için saturate() değeri kullanılır.

img {
    filter: saturate(800%);
}

Parantez içerisinde doygunluk değeri ve yüzde(%) ile kullanılır. 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%);
}

Parantez içerisinde eskitme değeri ve yüzde(%) ile kullanılır. 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 yazmamız 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şturmuş olduğumuz özel filtreleri HTML elemanlarına uygulamamıza olanak sağlıyor.

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

.

Hayırlı günler dilerim.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir