AnasayfaWebmaster › Css İle Resimleri Saydamlaştırıp Parlatma Kodu

Css İle Resimleri Saydamlaştırıp Parlatma Kodu

Merhaba arkadaşlar,

Site sahipleri için kullanılan temada sosyal ağ gibi bazı görsellerin saydamlaştırılması gerekebilir.Örnek olarak Emre.US sidebarında bulunan sosyal ağlar normalden daha fazla dikkat çekiyordu bunuda saydamlaştırarak halledecemi düşündüm ve uyguladım.Ne kadar doğru yaptım bilmiyorum fakat Bunuda css yardımıyla halledebiliyoruz.Lafı uzatmadan sizlerinde görselleri css yardımıyla nasıl saydamlaştıracabileceğinizi ve imleci üstüne getirdiğimizde normal rengini nasıl gösterebileceğinizi anlatayım.

İlk olarak css dosyasımıza ekleyelim (stlye.css);

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;
}

kodda bulunan opacity=50 değeri saydamlık derecesini belirliyor. Bununla birlikte opacity: 0.5 değerlerinide kendinize göre değiştirmeniz gerekiyor.(50=0.5 , 70=0.7 )

Bunun ardından, css ‘deki ayarlarımızı uygulamak istediğimiz kod’a , görsele class=”linkopacity” kodunu eklememizle işlem tamamlanmış olacak.

Örnek : saydamlaştırmak istediğim facebook icon’unun kodu.

<a href="http://www.facebook.com/EmreSaahin"rel="external,nofollow" title="Facebook">
<img src="<?php bloginfo('template_directory'); ?>/images/sosyal/facebook.png" alt="Facebook" /></a>

Örnek : class kodunu mevcut koda ekledikten sonraki hali

<a href="http://www.facebook.com/EmreSaahin"class="linkopacity" rel="external,nofollow" title="Facebook">
<img src="<?php bloginfo('template_directory'); ?>/images/sosyal/facebook.png" alt="Facebook" /></a>

 

Bu kadar, bir sonraki yazımızda görüşmek dileğiyle :)

Bir önceki yazımız olan PHP & WordPress Sayfa Oluşturma Süresi Kodu başlıklı makalemizde php sayfa oluşturma, php sayfa oluşturma süresi ve php sayfa oluşturma süresi ekleme hakkında bilgiler verilmektedir.

Yazar : Emre ŞAHİN

1995 Doğumlu, Fenerbahçeli, Hobi olarak Emre.US'da yazılar yazan, Wordpress ve vBulletin ile içli dışlı olup farklı alanlarda bir kaç sitesi daha bulunan Lise öğrencisi..

Yorum Yazarken;

Yorum yazın

Yorum yazarken şu HTML kodlarını kullanabilirsiniz:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • Facebook
  • Soru Sorun!
  • Twitter!
  • FriendFeed
  • RSS