CSS3 Resim Biçimlendirme (filter)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Resim Biçimlendirme (filter)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2580)
RAPOR ET
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 :
http://ustaderslik.com/resim/ders/vn8nt.jpg

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ü :
http://ustaderslik.com/resim/ders/vn8t7.png

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ü :
http://ustaderslik.com/resim/ders/vn8vm.png

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ü :
http://ustaderslik.com/resim/ders/vn8zk.png

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ü :
http://ustaderslik.com/resim/ders/vn92f.png

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ü :
http://ustaderslik.com/resim/ders/vn96q.png

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ü :
http://ustaderslik.com/resim/ders/vn98z.png

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ü :
http://ustaderslik.com/resim/ders/vn9d8.png

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ü :
http://ustaderslik.com/resim/ders/vn9kh.png

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ü :
http://ustaderslik.com/resim/ders/vn9qb.png

Orjinal resmin üzerine mouse ile gelirseniz animasyonlu şekilde bu hale gelecektir.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol