Css-Html İle Resim Bulanıklaştırma

  Bir webmaster çalışmasından daha merhabalar.Sitemize canlılık,şıklık,hoş bir görüntü sağlamak herkezin birinci önceliği olsa gerekki, bunun için sürekli çalışmalar yapılıyor.Bu çalışmalara bir katkımız olması dileğiyle bazı şık çalışmalardan söz etmeye özen gösteriyorum.
  Bu yazımızda değinceğimiz konu iste sitemizde bulunan logo veya ona benzer ön planda olan resimlere verilecek zarif bir bulanıklaştırma efekti.Bu efekt uygulandığı taktirde fare ile üzerine gelinen resim blanık bir görünüm kazanacaktır.Kısa bir kod dizininden oluşan bu efekt sitenize hoş bir görünüm katacağı gibi, sitenizin açılış hızına kesinlikle etki etmeyecektir.
  Uygulamamız hakkında yeterli bilgiyi verdiğimi düşünerek kodlara ve uygulamaya geçmek istiyorum.Öncelikle ilk adımımız css kodlarını temamıza eklemek.Aşağıdaki kodları şablon kodları arasındaki ]]></skin> kodunun tam üzerine gelecek şekilde temanıza ekleyip Şablonu Kaydet'e tıklayınız.

.blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;} .blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

Css kodları eklendikten sonra sıra geldi html kodumuzu resimlerimize uygulamaya.Buda gerçekten çok basit bir işlem.Bunu yapmak için izleyeceğiniz yol şu şekildedir;Resim kodlarının bulunduğu <a></a> taglarının içerisindeki href='www.forumzan.net' komutundan önce gelecek şekilde class='blur' komutunu yerleştiriyoruz ve şablonumuzu kaydediyoruz.Örnek olarak aşağıdaki kodlara bakınız.Uygulamanız gereken yer kırmızı ile belirtilmiştir.
<a class='blur' href='www.forumzan.net><img src='Resim Urlsi' /></a>

İlgili Aramalar:blogger resim blanıklandırma, blogger logo bulanıklaştırma, blogger logo bulanıklandırma, html resim bulanıklaştırma, css resim blanıklaştırma, css ve html resim hover efekti, üzerine gelince bulanıklaşan resim, fareyle üzerine gelince resim bulanıklaştırma

Bu Yazıyı Beğendinizmi?