Css Resim Efektleri

Merhaba arkadaşlar. Bu makalemizde css filtre efektlerinden bahsedeceğim. Aynı zamanda örneklerle göstereceğim. Filtre efektleri photoshop ve benzeri programlarla yapabildiğimiz efektleri bir kaç satır kod ile yapabilmemizi sağlıyor. Üstteki görselde görüldüğü üzere toplamda 9 adet efektimiz bulunmaktadır. Aşağıda yapacağımız örneklerin çıktısı yukarıdaki görselde yer almaktadır. İlk efektimiz ile başlayalım.
Grayscale (Siyah-Beyaz) Efekti
Resmi Siyah-Beyaz yapmaktadır.

#grayscale{

   -webkit-filter: grayscale(100%);

  filter: grayscale(100%);

}

#grayscale:hover{

  -webkit-filter: grayscale(0%);

  filter: grayscale(0%);

}

Hue-Rotate (Renk Tekeri) Efekti
0 ile 360 arası değerleri girebiliriz. Her değer farklı bir rengi ifade eder.

#hue-rotate{

   -webkit-filter: hue-rotate(300deg);

  filter: hue-rotate(300deg);

}

#hue-rotate:hover{

  -webkit-filter: hue-rotate(0deg);

  filter: hue-rotate(0deg);

}

Sepia (Kahverengi Ağırlıklı) Efekti
Bu efekt kahverengi tonları öne çıkartır. Eski bir fotoğraf efekti verir.

#sepia{

   -webkit-filter: sepia(80%);

  filter: sepia(80%);

}

#sepia:hover{

  -webkit-filter: sepia(0%);

  filter: sepia(0%);

}

Contrast Efekti
Resmin kontrast değerini değiştirir.

#contrast{

   -webkit-filter: contrast(200%);

  filter: contrast(200%);

}

#contrast:hover{

  -webkit-filter: contrast(100%);

  filter: contrast(100%);

}

Blur (Bulanıklaştırma) Efekti
Resimlerimizi istediğimiz oranda bulanıklaştırabiliriz.

#blur{

  -webkit-filter: blur(2px);

  filter: blur(2px);

}

#blur:hover{

  -webkit-filter: blur(0);

  filter: blur(0);

}

Invert (Ters Çevirme) Efekti
Görselde bulunan renkleri terse çevirir.

#invert{

  -webkit-filter: invert(90%);

  filter: invert(90%);

}

#invert:hover{

  -webkit-filter: invert(0%);

  filter: invert(0%);

}

Brightness (Parlaklık) Efekti
Resmin parlaklığını ayarlayabiliriz.

#brightness{

  -webkit-filter: brightness(200%);

  filter: brightness(200%);

}

#brightness:hover{

  -webkit-filter: brightness(100%);

  filter: brightness(100%);

}

Opacity (Saydamlık) Efekti
Resimlerin görünürlüklerini-saydamlıklarını ayarlayabiliriz.

#opacity{

  -webkit-filter: opacity(70%);

  filter: opacity(70%);

}

#opacity:hover{

  -webkit-filter: opacity(100%);

  filter: opacity(100%);

}

Drop-Shadow (Gölge) Efekti
Box-Shadow'a benzer bir gölge efektidir.

#dropshadow{

  -webkit-filter: drop-shadow(5px 5px 5px #000);

  filter: drop-shadow(5px 5px 5px #000);

}

#dropshadow:hover{

  -webkit-filter: drop-shadow(0 0 0 #000);

  filter: drop-shadow(0 0 0 #000);

}

Bir görsel üzerinde birden fazla efekti de aynı anda kullanabiliriz. Makalemizin sonuna gelmiş bulunmaktayız. Yeniden görüşmek dileğiyle...