Bağlantılar (Linkler), sayfanızdaki en önemli öğelerden biridir. Onlar olmazsa,  herhangi bir gezinti yapılmayacaktı.Bu yüzden linklerin görünümlerine dikkat çekmesine önem verilir. Çoğunlukla da onları mavi renkli ve altı çizgili  klasik görünümlerinden kurtarmak için Css kodlarını kullanıyoruz.       
         Bu yazıda linkleri daha sevimli hale getirecek 3 teknik bulacaksınız. Bu tekniklerin her birisi , JavaScript’ siz  - Hack’ siz  ve  Saf Css kodlarından oluşmaktadır.
 

  Csslink.rar

 

CSS Link Kodu


Bu çalışmamızda kullanmamız gereken ,

Html Kodu :

<a href="#">Link İfadesi<span>Açıklama İfadesi</span></a>

Öncelikler <span> etiketi ile belirtilen ifadeleri gizleyeceğiz ve link üzerine gelindiğinde  <span> etiketi içinde yazılan açıklama ifadelerini görüntüleyeceğiz. Açıklama ifadesi sabit (position:absolute;) olarak link’in üzerinde görüntülenecektir.

 CSS Kodu :

a{
z-index:10; }

 

a:hover{
position:relative;
z-index:100; }  

a span{
display:none; }  

a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10; }

Örnek İçin Tıklayın.

 

CSS Kodu ile Image Gallery


Küçük resimlerin üzerlerine mouse ile gelindiğinde büyük hallerini görüntüleceğiz. Bunu için madde imli listelerden faydalanacaz. Her liste öğesinde, bir küçük resim ve birisi ide büyük resim olmak üzere iki resmi birden barındıracağız.

HTML kodunuz aşağıdakine benzer olmalıdır :

<li> <a href="#"> <img src="images/02_1s.jpg" alt="gallery thumbnail" /> <span><img src="images/02_1.jpg" alt="gallery image" /></span> </a> </li>

 CSS Kodu :

ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none; }

 

  ul#gallery{
width:400px;
height:375px;
position:relative;
background:#e1e1e1 url(images/bg_preview.gif) no-repeat 50% 40%; }  

ul#gallery li{
float:left; display:inline; margin-top:300px; }  

ul#gallery a span{ display:none; }  

ul#gallery a:hover{ background:none; z-index:100; }  

ul#gallery a:hover span{ position:absolute; width:400px; height:300px; float:left; top:0; left:0; display:block; }

  Örnek İçin Tıklayın.

 

CSS ile 3D Buton Efekti


Bu bir butona Css ile uygulanan basit bir efekttir. Öncelikle <span> etiketini kullanarak bir buton görünümü sağlayacağız. 3 boyutlu görüntü sağlamak amacıya link span (a.span) etiketine Üst ve sol kenarlarına "açık renk" , sağ ve altlarına ise "gölge" uygulayacağız. Mouse buton üzerine gelince kenar renkler ters çevrilecek bu şekilde butona basılıyormuş etkisi olacak.

HTML Kodu :

<a href="#" class="button"><span>Buton İfadesi</span></a>

CSS Kodu :

a.button{float:left;
font-size:110%;
font-weight:bold;
border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
color:#333; width:auto; }  

 

a.button:hover{
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #999;
border-bottom:1px solid #999; color:#333; }  

a.button span{
background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
float:left;
line-height:24px;
height:24px;
padding:0 10px;
border-right:1px solid #777;
border-bottom:1px solid #777; }  

a.button:hover span{
border:none;
border-top:1px solid #777;
border-left:1px solid #777;
background:#d4d0c8 url(images/bg_btnOver.gif) repeat-x;
cursor:pointer; }

   Örnek İçin Tıklayın.

 


Yazının orjinaline buradan ulaşabilirsiniz.