CSS Filtreler İle Resimlerinize Efekt Verin

CSS'nin gelişimi ile hiç bir program ya da editöre ihtiyaç duymadan sadece CSS'den yararlanarak resimlerimize efektler kazandırabiliyoruz. Bu imkanı CSS3 Filtreler ile uygulayacağız.

Filtreleri Kullanmak

filter: filtreadi(deger);

Şuanda en düzgün sonuç veren tarayıcılar webkit motorunu kullanan tarayıcılardır, daha doğrusu filtreler bir tek webkit motorunu kullanan tarayıcılarda çalışıyor. İlerleyen zamanlarda tarayıcılar bu olaya destek verecektir, işte diğer tarayıcıların ön ekleri ve kullanımları;

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Bulanıklık Vermek İçin: Blur

img {
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -ms-filter: blur(2px);
   -o-filter: blur(2px);
    filter: blur(2px);
}

img:hover {
 filter: blur(0); 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-o-filter: blur(0); 
-ms-filter: blur(0); 
}

Gri Tonlama Vermek İçin: Grayscale

img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

img:hover {
filter: grayscale(0); 
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0); 
-o-filter: grayscale(0); 
-ms-filter: grayscale(0); 
}

Parlaklık Vermek İçin: Birghtness

img {
     -webkit-filter: brightness(0.5);
     -moz-filter: brightness(0.5);
     -o-filter: brightness(0.5);
     -ms-filter: brightness(0.5);
      filter: brightness(0.5);
}

img:hover {
     -webkit-filter: brightness(0.9);
     -moz-filter: brightness(0.9);
     -o-filter: brightness(0.9);
     -ms-filter: brightness(0.9);
      filter: brightness(0.9);
}

Doygunluk Vermek İçin: Saturate

img{
    filter: saturate(50%);
    -webkit-filter: saturate(50%);
    -moz-filter: saturate(50%);
    -o-filter: saturate(50%);
    -ms-filter: saturate(50%);
}

img:hover {
    filter: saturate(80%);
    -webkit-filter: saturate(80%);
    -moz-filter: saturate(80%);
    -o-filter: saturate(80%);
    -ms-filter: saturate(80%);
}

Nostalji Vermek İçin: Sepya

img { filter: sepia(100%);
  -webkit-filter: sepia(100%);
  -moz-filter: sepia(100%);
  -o-filter: sepia(100%);
  -ms-filter: sepia(100%);
}

img:hover { filter: sepia(10%);
  -webkit-filter: sepia(10%);
  -moz-filter: sepia(10%);
  -o-filter: sepia(10%);
  -ms-filter: sepia(10%);
}

Gölge Vermek İçin: Drop Shadow

img {
-webkit-filter: drop-shadow(9px 9px 20px black);
-moz-filter: drop-shadow(9px 9px 20px black);
-o-filter: drop-shadow(9px 9px 20px black);
  -ms-filter: drop-shadow(9px 9px 20px black);}

img:hover{
  -webkit-filter: drop-shadow(9px 9px 20px blue);
-moz-filter: drop-shadow(9px 9px 20px blue);
-o-filter: drop-shadow(9px 9px 20px blue);
-ms-filter: drop-shadow(9px 9px 20px blue);
}

Vermiş olduğum örnekler CSS Filtreler'den sadece birkaçı internette daha fazlasını bulabilir ve rahatlıkla kullanabilirsiniz.

Efektlerin Canlı Önizlemesi