Görsellere Kodla Donuk Efekti Verin

Yazar: Ömer Burak | 20 Haz 11 | 6 comments

Görsellere Kodla Donuk Efekti Verin

Uzun süredir yazmayı  düşündüğüm konulardan biriydi. Sonunda bugün yazabildim.

Nedir bu donuk efekt?

Bir çok web sitesinde görmüşsünüzüdr.Resim önce saydamdır yani donuk bir hali vardır fakat; fare ile üzerine gelince asıl renigini alır.

Bu olayı  Blogdaşlar kısmındaki  32*32 lik logolar kısmında da görmek mümkündür.Ona benzer örneklerle de karşılaşmışsıznıdır.İşte 2 adımda siz de sayfanızadaki  resimlere bu şekilde donuk efekti ile gösterebilirsiniz.

Sizlere olayı daha iyi anlatabilmek için örnek bir resimle,önce-sonra şeklinde gösterdim.

Örnek Resim

Resimlere  Donuk ya da Saydam Efektini Nasıl Verebilirim ?

  • İlk Adım:

Önce temanızın style.css dosyasının en altına aşağıda vermiş olduğum kodları yapıştırıyoruz.

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
  • Sonraki Adım:

Şimdi sadece resimimzin linkini kodun içine yerleştirmek kaldı.İstediğiniz resime aşağıdaki kodu kullanarak yukarıda anlatılan efekti verebilirsiniz.
Bu kodu aynı zamanda logo değişimleri (32*32) için de kullanabilirsiniz.

<a href="Resmin yönleceği adres" class="linkopacity">
<img src="Resminizin Linki"  alt="Resim açıklaması" height="50" width="50"></a>

Açıklama: height yükseklik width ise genişlik demektir.Bunların karşısında yer alan 50 rakamını değiştirerek resminizi istediğiniz boyuta sokabiliriz.

Hepsi bu kadar.Takıldığınız yerleri sorabilirsiniz.

Esen kalın=)


6 comments

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir