Linklerimizi Şenlendirelim

Yazılarımızda genellikle yazımıza referans olabilecek linkler veririz. Bu linkler text-link şeklinde olabileceği gibi bir fotoğraf yada buton üzerinden de olabilir.

Diğer sayfalarımıza verdiğimiz linklerin ziyaretçiler tarafından daha çok tıklanması için o linklere ilginç mause-over özellikler eklemek isteyebiliriz.

Basit CSS uygulamalarıyla sayfamızdaki linkleri vurgulayarak ziyaretçilerimizin dikkatini çekecek ve tıklanmasını teşvik edecek şekle getirelim.


ÖRNEK 1 : İmleç üzerine geldiğinde linkin rengi değişsin.

Linklerimizi Şenlendirelim

 a.ornek1 {
  color:#026AA5;
  font-weight:bold;
  font-size:22px;
 }
 a.ornek1:hover { color:#FF0000; } 

ÖRNEK 2 : İmleç üzerine geldiğinde text büyüsün.

Linklerimizi Şenlendirelim

 a.ornek2 {
  color:#f47c00; 
  font-weight:bold;
  font-size:22px;
 }
a.ornek2:hover { font-size:26px; } 

ÖRNEK 3 : Linklerimize back-ground özelliği ekleyelim.

Linklerimizi Şenlendirelim

 a.ornek3 {
  color:#C40000;
  font-size:22px;
  font-weight:bold;
  display:inline-block;
  padding-top:5px;
  padding-bottom:4px;
  padding-left:20px;
  padding-right:20px;
 }
 a.ornek3:hover {background:#C40000; color:#ffffff;}

Linkleri sürekli yukarıdaki örneklerde görüldüğü gibi sadece text-link olarak değil; bazen de resimler üzerinden veririz. Şimdi image-linklerimizi vurgulamak için birkaç basit yöntem görelim.

ÖRNEK 4 : İmage-linke border özelliği ekleyelim.

 .ornek4 { border:5px solid #F6F6F6; }
 .ornek4:hover { border:5px solid #f47c00; }

ÖRNEK 5 : İmage-linki opacity özelliği ile vurgulayalım.

 .ornek5 {
opacity:1.0;
filter:alpha(opacity=100);
}
.ornek5:hover {
opacity:0.7;
filter:alpha(opacity=70);
}

ÖRNEK 6 : Buton şeklinde sprite özelliği ile tasarlanmış örnek bir uygulama.

 a.ornek6 {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPSZYy6-xOUB5Mytp0wGdFIVYQC1klNLoCq9vFzTRsCziLKDKntYaX46f9p4bHC9IVA-JjOnGWCePy9lIBKwnlYR0SqqGY8BDQZ4dppEb1-WmknNWHOnbvf6r1GjqCAkG1l1qYwiIyfg-/s1600/linkler_buton.png);
  background-position: 0px 0px;
  display:inline-block;
  width:244px;
  height:65px;
 }
 a.ornek6:hover { background-position: 0px -65px; }

Text linklerimiz :
<a class="ornek1" href="postpage.html">Linklerimizi Şenlendirelim</a>
Image linklerimiz :
<a href="postpage.html"><img class="ornek4" src="image.png" /></a>

şeklinde olmalıdır. Linklere class değerinin verildiğini görüyorsunuz.


Site dışı link verirken sitemizin zarar görmemesi için nelere dikkat etmemiz gerektiği konusunu buradan inceleyebilirsiniz.

Tweet