renkli teneke » Css’in Opacity Özelliği İle Uygulama

internet çöplüğünden renkli kırıntılar…

Anasayfa » Web Programlama

Css’in Opacity Özelliği İle Uygulama

2 Ekim 2008 Görüntülenme: 1.863 8 Yorum Yazar: Ahmet

(Değerlendir)

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

Yazıyı beğendiysen başka yerlerde paylaşabilirsin:

RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.

Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 2 Ekim 2008" tarihinde yazılmış olan "Css’in Opacity Özelliği İle Uygulama" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.

8 Yorum »

Domatessuyu demiş ki:

Tarih: 2 Ekim 2008Saat: 02:46

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

Ahmet (Admin Abi) demiş ki:

Tarih: 2 Ekim 2008Saat: 12:33

Teşekkürler :)

Karbonizma demiş ki:

Tarih: 2 Ekim 2008Saat: 18:43

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.

Ahmet (Admin Abi) demiş ki:

Tarih: 2 Ekim 2008Saat: 22:27

Evet. Bunlardan biriside benim :)

Wordpress Resimli Bağlantı Ekleme | Hasan ALTUN demiş ki:

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

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

Css’in Opacity Özelliği İle Uygulama | BizimAkademi demiş ki:

Tarih: 29 Ocak 2009Saat: 13:31

[...] Kaynak: renkliteneke [...]

DesingXxKod demiş ki:

Tarih: 19 Eylül 2009Saat: 21:03

Teşekkürler.. ;)

heraradiginburda demiş ki:

Tarih: 25 Kasım 2009Saat: 22:27

Gerçekten güzel paylaşım

Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!

Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.