Bugün: 1
Tıklanma: 19
Online:
52.87.200.112
 

Bilginin,
eğlencenin, sinemanın yer verildiği tek adres!

  Sinema bölümünü ziyaret ettinizmi?  
             
 

WebCx | Blog Gibi Bişey =)

Css İle Link Renklendirme

WebCx>Yazılı Anlatımlar>Css Ä°le Link Renklendirme 
Merhaba arkadaşlar bu başlıktada sizlere css ile link renklendirmeyi göstericeğim.
Kullandığımız kodları Tasarım Ayarları>Css Kodu'nda herhangi bi yerinde kullanabilirsiniz.Konuya geçelim.

Öncelikle normal link rengi kodunu yazalım.
a:link {
color: #Buraya herhangi bi renk kodu yazınız Mesela:0066FF;
text-decoration: none;
}

Sonra üstüne geldiğimizde linkin hangi renk olucağını gösteren hover koduna geçelim.
a:hover {
color: #Buraya herhangi bi renk kodu yazınız Mesela:
ff3300;
text-decoration: none;
}
 
Ardından visited koduna geçelim. Bu kod önceden kullanılmış linkin rengini belirler.
a:visited {
color: #Buraya herhangi bi renk kodu yazınız Mesela:
c714bc;
text-decoration: none;
}

Son olarak active kodunu,yani linke tıkladığımızda linkin rengini belirleyen koda geçelim.
a:active {
color: #5caa00;
text-decoration: none;
}

Arkadaşlar bunlara çeşitli kodlarda ekleyebilirsiniz.Mesela hover koduna yazıyı büyüten veya üstüne geldiğimizde altını çizgili yapan komutlarda ekleyebilirsiniz.Örnek vermek gerekirse;
text-decoration: underline;
font-size: 18px;
 
text-decoration: underline; : Linkin üzerine gelindiğinde,linkin altında bir çizgi oluşur.
font-size: 18px; : Linkin üzerine gelindiğinde,linkin px ini yani boyutunu büyütür.
(18 sayısını değiştirerek büyüklüğü,küçüklüğü ayarlayabilirsiniz)


Son olarak elde ettiğimiz kod:
a:link {
color: #0066FF;
text-decoration: none;
}
a:visited {
color: #c714bc;
text-decoration: none;
}
a:hover {
color: #ff3300;
text-decoration: none;
text-decoration: underline;
 
font-size: 18px;
}
a:active {
color: #5caa00;
text-decoration: none;
}

Kodda yukarıda anlattığım gibi komutları ve renk kodlarını değiştirerek istediğiniz gibi bir link görüntüsü elde edebilirsiniz.
Hayırlı kullanımlar diliyorum ve zamanınızı ayırdığınız için teşekkürler =)
WebCx
  Ana Sayfa
Ziyaretçi Defteri
İletişim

Tasarımlar
Css Menüler
Videolu Anlatımlar
Resimli Anlatımlar
Yazılı Anlatımlar
Oyun Odası
Chat Odası

Video Kodu Buraya
 
     
  Telif hakları:WebCx Tüm Hakları Saklıdır  
     
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol