CSS FİLTER ÖZELLİĞİ

MErhaba..

CSS ile sayfadaki elemanlara farklı filtreler uygulayabiliyoruz.. Bulanıklaştırma,  gri skala renk değişimi, renk doyumu vb gibi...

FILTER

CSS'te kullanılan FILTER özelliği ile sayfa elemanlarına , resimlere vs  parlaklık, bulanıklık vb gibi farklı filtreler uygulayabiliyor..

GENEL KULLANIM

filter : ozellik( miktar );

BLUR() - BULANIKLIK

Blur ile elemanlara bulanıklık efekti verilebilir. Bulanıklık miktarı  PX  yada REM cinsinden verilebilir.. Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.blur{filter:blur(5px);}

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="blur" src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

BLUR(5px)

BRIGHTNESS() - PARLAKLIK

Brightness ile elemanlara parlaklık  efekti verilebilir. Parlaklık miktarı  % cinsinden verilebilir..  100% varsayılan parlaklıktır.. Üzzeri değerlerde parlaklık artarken, altındaki değerlerde parlaklık azalacaktır..  Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.brightness{ filter:brightness(300%); }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="brightness" src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

BRIGHTNESS(300%)

CONTRAST() - KONTRAST

Contrast ile elemanlara contrast efekti verilebilir. Kontrast miktarı  % cinsinden verilebilir..  100% varsayılan kontrast oranıdır.. Üzeri değerlerde kontrast artarken, altındaki değerlerde kontrast azalacaktır..  Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.contrast { filter:contrast (300%); }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="contrast " src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

CONTRAST(300%)

GRAYSCALE() - SİYAH BEYAZ 

Grayscale ile elemanlara siyah beyaz efekti verilebilir. Grayscale miktarı  % cinsinden verilir..  0% ile 100% arasında değer alır.. 100% elamanın tamamen siyah beyaz olmasını sağlar. 0%'a gidildikçe siyah beyaz oranı azalır...   Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.grayscale { filter:grayscale (100%); }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="grayscale " src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

GRAYSCALE(100%)

INVERT() - TERS RENK 

Invert ile elemanlara ters renk  efekti verilebilir. Invert miktarı  % cinsinden verilir.. 0% ile 100% arasında değer alır..  100% elamanın tamamen ters renklere dönmesini  sağlar. 0%'a gidildikçe ters renk  oranı azalır...   Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.invert{ filter:invert(100%); }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="invert" src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

INVERT(100%)

SATURATE() - DOYGUNLUK

Saturate  ile elemanlara  renk doygunluğu  efekti verilebilir. Saturate miktarı  % cinsinden verilir..  100% varsayılan renk doygunluğudur.  Üzeri değerlerde renk doygunluğu artarken, altındaki değerlerde renk doygunluğu azalacaktır..  Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.saturate{ filter:saturate(100%); }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="saturate" src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

SATURATE(300%)

SEPIA() - NOSTALJİK

Sepia ile elemanlara  nostaljik renk   efekti verilebilir. Nostaljik renk miktarı  % cinsinden verilir..   0% ile 100% arasında değer alır..  100% elamanın tamamen nostaljik renk efekti   sağlar. 0%'a gidildikçe nostaljik renk  oranı azalır...   Sayafadaki tüm elemanlara uygulanabilir..

CSS

 img{ width:45%;}
.sepia{ filter:sepia(100%); }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="sepia" src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

SEPIA(100%)

BİRDEN FAZLA FİLTRE UYGULAMAK

Sayfadaki elemanlara aynı anda birden fazla filtre uygulanabilir. Bunun için filter özelliğinde değerler aralarında bir boşluk bırakılarak yazılır. Sayı sınırı olmadan , istenildiği kadar filtre aynı anda yazılabilir..

Örneğin resmin  hem siyah beyaz  hemde bulanık olmasını 

CSS

 img{ width:45%;}
.myfilter { filter: blur(5px) grayscale(100%) }

HTML

 <img src="https://erkanunlu.com.tr/resim/7.jpg">	
 <img class="myfilter" src="https://erkanunlu.com.tr/resim/asansor.webp">

EKRAN

BLUR(5px)  ve  GRAYSCALE(100%)

Böylece resim siyah beyaza dönüşürken aynı zamanda bulanıklaşacaktır...

Görüşmek üzere...