Bu dersimizde css3 le resimlerin ayarlarıyla oynamayı göreceğiz.Yani resmi grileştirme,parlaklık artırma,bulanıklaştırma gibi bir çok özelliğini göreceğiz.Bu işlemleri yapmamızı sağlayan kod filter.Şimdi tek tek inceleyelim.Örnek kodlarda oranları olabildiğince abarttım.Farkın tam olarak görülebilmesi için.
Örneklerde kullanacağımız resmin orjinali :
1-grayscale
Grayscale resimi siyah-beyaz yapmamızı sağlayan parametresi.Yüzde değer alıyor 100% verdiğimizde siyah-beyaz olur resim.
img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
Görüntüsü :
2-sepia
Sepia resmi eskitme gibi bir işlem yapıyor.Yani resmi sarılaştırıyor.Sepiada yüzde değer alır.
img{
filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
}
Görüntüsü :
3-invert
İnvertin tam karşılığı ne bilmiyorum ama renkleri tersine çeviriyor :) Aşağıdaki resme bakınca anlarsınız.İnvert de yüzdeli değer alır.
img{
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
}
Görüntüsü :
4-brightness
Brightness ismindende anlaşılabileceği gibi parlaklığı ayarlıyor.Normal değeri 100% dür.değer düştükçe parlaklık azalır.Değer artıkca parlaklık artar.
img{
filter: brightness(200%);
-webkit-filter: brightness(200%);
-moz-filter: brightness(200%);
-o-filter: brightness(200%);
}
Görüntüsü :
5-contrast
Contrast resmin kontrastını ayarlamamıza ayar.Normal değeri 100% dür.Değer azaldıkça kontrastı azalır.Değer artıkça kontrastı artar.Kontrast kısaca resmin canlılık oranı.
img{
filter: contrast(200%);
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
-o-filter: contrast(200%);
}
Görüntüsü :
6-blur
Blur resimi bulanıklaştırmamıza yarar.Değer olarak px alır.
img{
filter: blur(5px);
-webkit-filter:blur(5px);
-moz-filter:blur(5px);
-o-filter: blur(5px);
}
Görüntüsü :
7-saturate
Saturate ne olduğunu tam çözemedim.Sadece renkleri çok acayip yapıyor :) Değer olarak sadece sayısal değerler alıyor.
img{
filter: saturate(10);
-webkit-filter:saturate(10);
-moz-filter:saturate(10);
-o-filter: saturate(10);
}
Görüntüsü :
8-hue-rotate
Hue-rotate içlerinden en sevdiğim özellik oldu.Verdiğimiz orana göre renkleri değiştiriyor.Görüntü olarak çok güzel görüntüler çıkıyor.Değer olarak deg yani derece giriyoruz.
img{
filter: hue-rotate(100deg);
-webkit-filter: hue-rotate(100deg);
-moz-filter: hue-rotate(100deg);
-o-filter: hue-rotate(100deg);
}
Görüntüsü :
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
img{transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;}
img:hover{filter: hue-rotate(60deg) sepia(50%) grayscale(50%);-webkit-filter: hue-rotate(60deg) sepia(50%) grayscale(50%); -moz-filter: hue-rotate(60deg) sepia(50%) grayscale(50%);-o-filter: hue-rotate(60deg) sepia(50%) grayscale(50%);}
</style>
</head>
<body>
<img src="http://www.freefever.com/stock/cute-scenery-background-wallpapers-cartoon-wallpaper.jpg" width="960" height="500" /> <br />
</body>
</html>
Görüntüsü :
Orjinal resmin üzerine mouse ile gelirseniz animasyonlu şekilde bu hale gelecektir.
UstaDerslik
