lostyazilim
tr.link

CSS 3 Resme Blur efekti verme

7 Mesajlar 4.761 Okunma
lstbozum
tr.link

ErenKeskin ErenKeskin Girişimci, Front-end Developer Kullanıcı
  • Üyelik 11.09.2011
  • Yaş/Cinsiyet 29 / E
  • Meslek Elektrik-Elektronik Mühendisi
  • Konum Eskişehir
  • Ad Soyad E** K**
  • Mesajlar 1223
  • Beğeniler 243 / 336
  • Ticaret 2, (%100)
CSS‘in internet için çok büyük bir nimet olduğunu daha önceden söylemiştik. Ancak her şeyin karşılığını bulamıyorduk. Örneğin bir resme “blur” yani “soldurma” efekti vermek istesek bunu yapamazdık. Ancak CSS 3 ile buda artık mümkün, css “-blur” kodu sayesinde bunuda basitçe yapabiliriz.

Örnek verecek olursak aşağıdaki resimde bir tarafda normal resim varken diğer tarafda blur uygulanmış resim yer almaktadır.

img {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}




Burada ise resmi tamamen grileştirmeye yarayan blur kodu sayesinde işlem gerçekleştirdik.


img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}




Ayrıntılı bilgi için: http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
Kaynak: http://erenkeskin.com/css-3-resme-blur-efekti-verme/
LadyArch3r gkhnsgnc TheLacivert

kişi bu mesajı beğendi.

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.
wmaraci
reklam

ShaKa ShaKa JavaScript Kullanıcı
  • Üyelik 29.05.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Donanım
  • Konum Mersin
  • Ad Soyad E** D**
  • Mesajlar 173
  • Beğeniler 24 / 54
  • Ticaret 5, (%100)
paylasim icin tskler eren guzel bi kaynak olmus :)
arsive ekliyim lazim olur mutlaka
 

 

https://www.okeyy.net/

ofismobilya ofismobilya WM Aracı Kullanıcı
  • Üyelik 09.01.2012
  • Yaş/Cinsiyet 47 / E
  • Meslek webmaster
  • Konum Düzce
  • Ad Soyad ** **
  • Mesajlar 107
  • Beğeniler 22 / 12
  • Ticaret 1, (%100)

ShaKa adlı üyeden alıntı

paylasim icin tskler eren guzel bi kaynak olmus :)
arsive ekliyim lazim olur mutlaka


çok hoş ana sayfada , resim galerinde işe yarayacakbir kod ancak sayfaya kodu ekledim değişiklik olmadı çalışmadı css3 te yapmam gereken farklı bir işlem varmı ?
normal css kodu gibi eklediğimde herhangi bir değişiklik olmuyor:confused:
 

 

ErenKeskin ErenKeskin Girişimci, Front-end Developer Kullanıcı
  • Üyelik 11.09.2011
  • Yaş/Cinsiyet 29 / E
  • Meslek Elektrik-Elektronik Mühendisi
  • Konum Eskişehir
  • Ad Soyad E** K**
  • Mesajlar 1223
  • Beğeniler 243 / 336
  • Ticaret 2, (%100)

ofismobilya adlı üyeden alıntı

çok hoş ana sayfada , resim galerinde işe yarayacakbir kod ancak sayfaya kodu ekledim değişiklik olmadı çalışmadı css3 te yapmam gereken farklı bir işlem varmı ?
normal css kodu gibi eklediğimde herhangi bir değişiklik olmuyor:confused:


Fatih Hayrioğlu tarafından yapılan bilgilendirmede Chrome ve Safari destekli olduğu öğrendim. Daha ayrıntılı bilgi için bir linki konuya dahil ediyorum.
 

 

herenkeskin.com - Elektrik ve Elektronik Mühendisi - Gömülü Sistemler üzerine çalışıyorum.
wmaraci
wmaraci

mujdatsayar mujdatsayar M.Kemal Atatürk Kullanıcı
  • Üyelik 04.04.2012
  • Yaş/Cinsiyet 36 / E
  • Meslek Grafik tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad ** **
  • Mesajlar 1285
  • Beğeniler 452 / 308
  • Ticaret 0, (%0)
valla html5 css3 jugeri derken yakında FLASH ölcek ha burdan deyim ben flash denen bişiy kalmıcak yakın zamanda ,.)
 

 

www.mujdatsayar.com

ofismobilya ofismobilya WM Aracı Kullanıcı
  • Üyelik 09.01.2012
  • Yaş/Cinsiyet 47 / E
  • Meslek webmaster
  • Konum Düzce
  • Ad Soyad ** **
  • Mesajlar 107
  • Beğeniler 22 / 12
  • Ticaret 1, (%100)
flasha bişi olmaz 3-4 sene önce bende yıla kalmaz azalır demiştim ... ama her daim flash kendini yeniliyor xml ile entegre olunca iice akıllara zarar oluyor...
 

 

LadyArch3r LadyArch3r Web Developer Kullanıcı
  • Üyelik 02.04.2011
  • Yaş/Cinsiyet 34 / E
  • Meslek Web Developer
  • Konum Antalya
  • Ad Soyad B** K**
  • Mesajlar 930
  • Beğeniler 60 / 102
  • Ticaret 3, (%100)
Güzel paylaşım teşekkürler.
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al