CSS Sprite İle Hover Efekti

CSS Sprite tekniğinin nasıl kullanıldığını şu yazımda anlatmıştım.
Şimdi ise CSS Sprite ile nasıl interaktif butonlar yapabileceğimize bakalım. Bu yazıda buton kullanımından bahsedeceğim ancak bu kullanım sadece butonlar için değil, hayal gücünüzü katarak farklı sonuçlar ortaya koyabilirsiniz. Artık başlayalım.
CSS Sprite nedir önce kısaca hatırlayalım. Sayfamızda çağırılacak bir çok görsel öğeyi tek tek çağırmak yerine tek bir parça halinde çağırıp makaslayarak kullanmamızı sağlayan teknik.

CSS Sprite Hover nedir?
Hover efekti, fare imlecimizin etiketli linklerimizin üzerine geldiğinde meydana gelen değişikliktir. Mesela altı çizili linkler, kalın harflerle yazılmış linkler gibi.

Gördüğünüz gibi link üzerine geldiğimizde yazı altı çizili hale gelmiş.
Bunu basit bir yöntemle

a:hover {text-decoration: underline;}


şeklinde yapıyoruz.

Peki iş görsel kullanılan linklere geldiğinde?

Bunu nasıl yaparım ? Bakalım.

Şöyle bir şey yapmak istiyorum mesela, link buton üzerine geldiğinde şeffaf bir efekt oluşsun.
Önce 248 px genişliğinde 39 px yüksekliğinde normal ve efektli haliyle bir görsel hazırlıyorum. Her bir butonun genişliğinin 124 px yüksekliğinin ise 39 px olmasına dikkat ediyorum. Tabi bu benim isteğime göre, siz nasıl bir buton istiyorsanız ona göre boyut kullanabilirsiniz.

Kodlara geçiyoruz.

#menu {width:124px;height:39px;}
#menu ul {margin:0;padding:0;list-style:none;}
#menu li {float:left;text-indent:-9999px; }
#anasayfa a{
width:124px;
height:39px;
display:block;
background:url("tekparca.gif") no-repeat 0px top;
}
#anasayfa a:hover{
width:124px;
height:39px;
display:block;
background:url("tekparca.gif") no-repeat -124px top;
}

Css kodlarımız bu şekilde. Sayfada göstermek için ise şu kodu kullanıyoruz.

<div id="menu">
<ul>
<li><a href="anasayfa.html" title="Anasayfa" id="anasayfa">Anasayfa</a></li>
</ul>
</div>

İşte bu kadar. Basit ve kısa anlatımla CSS Sprite ile hover efektinin kullanımını anlatmaya çalıştım. Yorum yazarak ya da iletişime geçerek sorun çıkan yerleri bildirebilirsiniz. Muhakkak dönüş yapacağım.

Kenan CANOL

Google sayfama göz atabilirsiniz.

1 Yorum

  1. Berkan Molla   •  

    Tam da aradığım bir dersti. Sade bir dille gayet iyi bir şekilde anlatmışsınız. Teşekkürler 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir