CSS3 Kullanarak Resimlere Efekt Verme

CSS3 kullanarak ek programlara gerek kalmadan basit kodlamalarla resimlere efekt verebiliriz. Bunun için css3 filter özelliğini kullanmamız gerekiyor.

CSS3 kullanarak ek programlara gerek kalmadan basit kodlamalarla resimlere efekt verebiliriz. Bunun için css3 filter özelliğini kullanmamız gerekiyor. Filtre olarak ekleyebileceklerimiz: Blur, brightness, saturate, hue-rotate, contrast, invert, grayscale, sepia

Birden fazla filtreyi birlikte kullanabilirsiniz.Instagram filtreleri de şu şekilde verilebilir:

.img-xpro2 {
  filter: contrast(1.3) brightness(0.8) sepia(0.3) saturate(1.5) hue-rotate(-20deg);
}
.img-willow {
  filter: saturate(0.02) contrast(0.85) brightness(1.2) sepia(0.02);
}
.img-walden {
  filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
}
.img-valencia {
  filter: sepia(0.15) saturate(1.5) contrast(0.9);
}
.img-toaster {
  filter:sepia(0.4) saturate(2.5) hue-rotate(-30deg) contrast(0.67);
}


Örnek Dosya: https://www.dropbox.com/s/bvaup1ydh5gx3l1/css3filtreler.rar


Video Kod
VideoKod ile en popüler kod dillerini çabucak öğrenin. HTML ve CSS ile web siteleri hazırlayın. Wordpress ile sitenizin altyapısını oluşturun. Ücretsiz kodlama dersleri burada.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git