Giriş » Web Programlama

Css’in Opacity Özelliği İle Uygulama

2 Ekim 2008 Görüntülenme: 366 5 Yorum Yazar: Ahmet

bir diğer örnekte sesebian.com'un bağlantı alanı

bir diğer örnekte sesebian.com

Css her zamanki gibi ilgimi çekmeye devam ediyor. Bende her geçen gün Css hakkında daha çok bilgi öğrenmeye çalışıyor ve öğreniyorum. Şuanda birçok blog sitesinde bulunan “Bağlantı Kutuları” denilen şeyin Css ile nasıl yapıldığını kısaca anlatacağım. Yapacağımız çalışmanın nasıl birşey olacağını merak ediyorsanız Alişko‘nun hazırlamış olduğu ve benimde sitemde severek kullandığım, sitemdeki “Tavsiye Bağlantılar” alanına bakabilirsiniz. Ya da başka bir alternatif olarak buraya tıklayabilir ve yapacağımız örneği inceleyebilirsiniz.

Size direkt olarak kodları vereceğim ve uygulamayı göstereceğim. İlk olarak Css’imizi oluşturuyoruz. Css kodları aşağıdaki gibidir.

<*style type="text/css">
.saydam img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
-moz-opacity: 0.5;
}
.saydam:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
<*/style>

Yukarıdaki Css kodumuzu <head>…</head> tagları arasına yerleştirelim. (Kodlardaki ilk satır ve son satırda bulunan * işaretini kaldırın öyle çalışmanıza dahil edin.)

index.html adında bir dosya oluşturalım ve içerisinede;

<*a href="http://www.renkliteneke.com/" class="saydam"><*img src="2.png" width="51" height="50" border="0" /> <*/a>

şeklinde bağlantılı resimlerimizi ekleyelim. (Kodlardaki ilk satır ve ikinci satırda bulunan * işaretini kaldırın öyle çalışmanıza dahil edin.)

Çalışmamız hazır durumda. İstediğiniz gibi değiştirerek kullanabilirsiniz.

Belki bir daha bakmak istersiniz: Canlı Örnek

Örnek Çalışmayı İndir

Kötüİdare ederOrtaGüzelMükemmel (No Ratings Yet)

5 Yorum »

  • Domatessuyu demiş ki:

    Sitenizin hayranıyım :p Çok seviyorum bu yazınızı çaldım biraz

    Tarih: 2 Ekim 2008Saat: 02:46
  • Ahmet (Admin Abi) demiş ki:

    Teşekkürler :)

    Tarih: 2 Ekim 2008Saat: 12:33
  • Karbonizma demiş ki:

    Teşekkür ederim Ahmet. Bir çok blog metin olarak bağlantı kullanıyor. Fakat bu özelliği kullanarak daa şık bağlantılar verilebilir. Sırf bu yüzden bağlantı değişimi yapmak isteyen bile çıkar.

    Tarih: 2 Ekim 2008Saat: 18:43
  • Ahmet (Admin Abi) demiş ki:

    Evet. Bunlardan biriside benim :)

    Tarih: 2 Ekim 2008Saat: 22:27
  • Wordpress Resimli Bağlantı Ekleme | Hasan ALTUN demiş ki:

    [...] bağlantılarla ilgili farklı bir uygulama içinde Renkliteneke.com sitesine [...]

    Tarih: 21 Aralık 2008Saat: 21:33

Yazıyı yorumlayabilirsiniz.

İlerleyen zamanlarda siz ziyaretçilerime daha kaliteli içerik sağlayabilmem için sizden ricam lütfen yorumlarınızı eksik etmeyin. İyi veya kötü yönde hiç fark etmez.

Yorum ekleye bilir yada yazı için geri bildirim gönderebilirsiniz..Bu yazı için yorumlarına abone ol: subscribe to these comments

 

Yorum içerisinde kullanabileceğiniz Html tagları :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Yazıya yorum yazdığınızda yorumunuzun hemen yanında bir Gravatarınız yayınlanacaktır.Hani benim Gravatarım?.