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{Hue-Rotate (Renk Tekeri) Efekti
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#grayscale:hover{
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
0 ile 360 arası değerleri girebiliriz. Her değer farklı bir rengi ifade eder.
#hue-rotate{Sepia (Kahverengi Ağırlıklı) Efekti
-webkit-filter: hue-rotate(300deg);
filter: hue-rotate(300deg);
}
#hue-rotate:hover{
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
Bu efekt kahverengi tonları öne çıkartır. Eski bir fotoğraf efekti verir.
#sepia{Contrast Efekti
-webkit-filter: sepia(80%);
filter: sepia(80%);
}
#sepia:hover{
-webkit-filter: sepia(0%);
filter: sepia(0%);
}
Resmin kontrast değerini değiştirir.
#contrast{Blur (Bulanıklaştırma) Efekti
-webkit-filter: contrast(200%);
filter: contrast(200%);
}
#contrast:hover{
-webkit-filter: contrast(100%);
filter: contrast(100%);
}
Resimlerimizi istediğimiz oranda bulanıklaştırabiliriz.
#blur{Invert (Ters Çevirme) Efekti
-webkit-filter: blur(2px);
filter: blur(2px);
}
#blur:hover{
-webkit-filter: blur(0);
filter: blur(0);
}
Görselde bulunan renkleri terse çevirir.
#invert{Brightness (Parlaklık) Efekti
-webkit-filter: invert(90%);
filter: invert(90%);
}
#invert:hover{
-webkit-filter: invert(0%);
filter: invert(0%);
}
Resmin parlaklığını ayarlayabiliriz.
#brightness{Opacity (Saydamlık) Efekti
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
#brightness:hover{
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
Resimlerin görünürlüklerini-saydamlıklarını ayarlayabiliriz.
#opacity{Drop-Shadow (Gölge) Efekti
-webkit-filter: opacity(70%);
filter: opacity(70%);
}
#opacity:hover{
-webkit-filter: opacity(100%);
filter: opacity(100%);
}
Box-Shadow'a benzer bir gölge efektidir.
#dropshadow{Bir görsel üzerinde birden fazla efekti de aynı anda kullanabiliriz. Makalemizin sonuna gelmiş bulunmaktayız. Yeniden görüşmek dileğiyle...
-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);
}
1 Yorum
Metin Ersal
Teşekkürler...