26 Aralık 2012 Çarşamba

CSS Filtreler İle Resimlere Efekt Verme

16 yorum

Yazılarıma yapılan yorumlar yeni yazı fikirleri için beni besleyen en iyi kaynak. Gelen yorumlarda sorulan soruları daha sonra açıklamak üzere bir yere not alıyorum. Bunlardan biri de resimlerin etrafındaki gölgeyi kaldırmakla ilgili yazdığım yazıya Değmesin Yağlı Boya’nın yaptığı yorumdu. Yorumunda resmin üzerine gelince efekt verilip verilmeyeceğini sormuştu.

 

Bu yazıda size CSS programlama dilinin filtre özelliğinden bahsedeceğim. CSS’te filtre kodlarını kullanarak resimlere bazı özel efektler verebiliyoruz.

 

Kodlara geçmeden önce şunu belirteyim, aşağıda verdiğim kodları Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne ekleyeceksiniz.

 

1. Resme Siyah-Beyaz Efekti Verme

 

.post-body img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}

.post-body img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}

 

2. Resme Bulanıklık Efekti Verme

 

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

.post-body img:hover {
filter: blur(0);
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
}

 

3. Resme Şeffaflık Efekti Verme

 

.post-body img {
opacity:0.3;
}

.post-body img:hover {
opacity:1;
}

 

4. Resme Zoom Efekti Verme

 

.post-body img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.post-body img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

 

Efektlerin görünümünü aşağıdaki videoda arka arkaya sıraladım.

 

 

İpucu: Farkettiyseniz hepsinde .post-body img  ve .post-body img:hover  şeklinde kod var.Bunlarda .post-body img resmin sayfadaki görüntüsünü temsil eder, post-body img:hover  ise üzerine gelinceki görüntüyü temsil eder. Siz tam tersi efekt istiyorsanız bunların altındaki kodları yer değiştirebilirsiniz.

16 yorum:

  1. güzel bir paylaşım olmuş ben Şeffaflık efektşni kulanıyorum

    YanıtlaSil
  2. mesela yazımın içindeki resme tıklayınca hemen resme gidiyoya onu nasıl düzeltebilirim resme gitmemesini istiyorum
    (Örnek yorum formundaki ünlem işareti gibi resme tıklayınca gitmesin ?

    YanıtlaSil
  3. Resme bağlantı vermezseniz tıklayınca başka bir yere yönelmez.

    YanıtlaSil
  4. Merhabalar. Ben resme bulanıklık verme kodunu eklemek istedim ama çalışmadı. Ben mi beceremedim kodlarda mı bir sorun var anlamadım. Yinede paylaşım güzel emeğinize sağlık...

    YanıtlaSil
  5. selamlar, bu efektler güzel ancak sadece webkit tabanlı tarayıcılarda (google Chrome, safari, yandex browser) çalışır. firefox ve explorerda göremezsiniz.

    sizin verdiklerinizden sadece şeffaflık efekti tüm tarayıcılarda görünür, diğerleri sadece chrome gibi tarayıcılarda çalışır. Serkan Çokaydın isimli arkadaşın sorunu da ondan kaynaklanıyordur muhtemelen..

    YanıtlaSil
  6. Elbette bu kodlar modern tarayıcılar için.

    YanıtlaSil
  7. Serdar Hocam Sementit Temanızla Biraz oynadım. Link Aşağıdadır;

    http://hkhjkhjkjuyg.blogspot.com

    YanıtlaSil
  8. şeffaflık efekti kodlarını ekledim oda olmadıııııııı hocam ya sorun nedir

    YanıtlaSil
  9. @EYLÜL
    Sorun ya kodu yanlış yere eklemenizdir ya da siteyi internet explorer ile görüntülemenizdir.

    YanıtlaSil
  10. chrome kullanorum ve kodaları aynen uyguluyorum yani defalarca denedim yanlış eklemiyorum serdar bey..

    YanıtlaSil
  11. O halde yanlış yere ekliyorsunuzdur muhtemelen. Ona ve parantezlerin doğru kapandığına dikkat edin.

    YanıtlaSil
  12. ]]> kodunun üstüneekliyorum zaten kpyalama yaptığım için hata olmuyor ekleme konusunda

    YanıtlaSil
  13. ]]></b:skin> kodunun bulup bir kaç satır üzerine ekleyin.

    YanıtlaSil
  14. Bloghocam Tv sitemde sağda resimli menü var sadece oraya nasıl uygulayabilirim bu şekil ]]> üstüne uyguladığında paylaşımdaki resimler oluyo

    YanıtlaSil
  15. @Cihan Türkyılmaz
    .post-body img yerine menüdeki resimleri tanımlayan sınıfın ismini yazmalısınız.

    YanıtlaSil
  16. Resimlere efect veremeyen arkdaşların Css class ve id'lerinize dikkat etmenizi öneririm eğer kendi sitenizde bir resme efect verecekseniz önce efecti vereceğiniz id veya class ı bulup o class yada id önüne img koymanız lazım yani arkdaşın verdiği kodlardaki class lara göre yapmaya çalışrsanız sizde o şekilde bir class atanmadığı için sayfa içinizde çalışmayabilir.

    YanıtlaSil

Picardes

LİNKLER