Resimlerinizi CSS ile farklı gösterin.

15 Mart 2008 1.001 Kez okunmus Bir Yorum Yapılmış

Bağlantı verdiğim adresler bölümünde bu uygulamanın bir örneğini göreceksiniz, bunu nasıl yaptığı merak eden blog yazarı arkadaşlarım oldu. Özelden gelen bu mesajları yazı olarak cevapladım, kimi yapabildi kimisi ise yapamadı. Bende bunun nasıl yapıldığını birde resimli anlatayım dedim. Bir kaç css kod yardımıyla bu görünümü yapabiliyoruz, ben bu uygulamayı bir çeşit blog dizini olarak kullanmayı seçtim, resim olarak ise 35X35 ebatlarını kullandım, tabi siz farklı amaçlar içinde kullanabilirsiniz. Gelelim nasıl yapıldığına. Blogunuzun Style.css klasörü varsa veya olmayanlar için css kodlarının olduğu bölüme aşağıda vereceğim css kodlarını istedikleri bir bölüme ekliyebilirler. { tagının kapanmış olduğuna dikkat edin tabi, genelde en sona ekleyebilirsiniz.

 

 

 

CSS Kodlar

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

Yukarıdaki kodları Style.css kodlarına ekliyorsunuz, üzerinde değişiklik yapmamaya dikkat edin. Aşağıdaki kodlar ise resminizin görüleceği kısma ekliyeceğiniz kodlardır. Kırmızı bölüm bağlantı adresi, yeşil bölüm Title açıklaması, mavi bölüm ise image dosyanızın yani resminizin bağlantı adresi olacak.

HTML Kodlar

 

<a class=”linkopacity”href=”http://“title=isim>

<imgsrc=”http://images” style=”border:1px solid black;”></a>

Yazar: sesebian │ Tarih: 15 Mar 2008 │ Kategori Web Tasarım Örnekleri │ Paylaş