CSS resimli hover

Ya arkadaşlar işin acemisiyim, internette gördüklerim ile 5 adetten oluşan bir resimli hover butonu yapmaya uğraşıyorum.

Sanırım hem gereğinden fazla kod uzunluğu oluştu hemde butonlarım alt alta listelendi.

kullandığım kod aşağıdaki gibi

style.css

#f1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;

}

#f1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}




#t1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;

}

#t1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}




#g1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;

}

#g1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}




#y1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;

}

#y1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}




#r1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;

}

#r1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0;
}

bileşenlerdeki metin kutusuna koyduğum linkler

<a id="f1" href="#" title="Facebook"></a>
<a id="t1" href="#" title="Twitter"></a>
<a id="g1" href="#" title="Google+"></a>
<a id="y1" href="#" title="Youtube"></a>
<a id="r1" href="#" title="RSS"></a>

göründüğü şekli




Şimdi bunları tek bir css kodunda nasıl toparlarım? ve alt alta değilde yan yana nasıl sıralarım?

Bunun en kısa hali şu şekilde olur.
Html :

<div class="cerceve">
<li><a href="#" title="Facebook"></a></li>
<li><a href="#" title="Twitter"></a></li>
<li><a href="#" title="Google+"></a></li>
<li><a href="#" title="Youtube"></a></li>
<li><a href="#" title="RSS"></a></li>
</div>

Css :

.cerceve {
   width:300px;
    height:60px;
    background-color:black;
}
.cerceve li {
   display: block;
   width: 60px;
   height: 60px;
    list-style:none;
   float:left;
}

.cerceve li:nth-child(1){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(1){
 background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}
.cerceve li:nth-child(2){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(2){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}
.cerceve li:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}
.cerceve li:nth-child(4){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(4){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}
.cerceve li:nth-child(5){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;-content/themes/pitch/images/r1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(5){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0; 
}

İşlemin sonucu böyle çıkıyor şekilde çıkıyor.
Daha fazla kısaltmak istersen Font Awesome kullanmalısın. Hazır png formatında resimler kullanarak daha fazla kısamazsınız.

tek bir css kodunda toplmanmaz ama sprite kullanabilirsin.

Doğru bide sprite vardı
Bu arada konu yanlış kategoride açılmış.

css sprite tekniği uygulanması gerekir.

yardımın için çok sağol dostum.



Burada hepsini bir araya koydum, sprite tekniğini nasıl yapabiliriz?

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 00:51:56 -->-> Daha önceki mesaj 00:50:03 --


wordpres blogumla alakalı olunca buraya açıverdim dostum

Sprite tekniğinde de aynı şekilde uzayacak yeni farkettim

Sprite tekniği bütün resimleri birleştirip tek bir dosya üzerinden çağırmaya deniyor.
.cerceve li:nth-child(1){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(1){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}

Burada sadece bir ikonun kodu var. Sizin kullandığınız örnekte 5 tane ikon olduğu için hover ile birlikte 10 satır oluyor.

Sprite kullandığınız zaman bu 10 satır yine aynı kalacak. Sebebi her li elemanına mecburen arkaplan olarak birleştirdiğiniz resmi eklemeniz gerekiyor yine.
Örnek :
birinci ikon {background:url('birlestirdiginiz_resim.png') -60px 0;}
ikinci ikon {background:url('birlestirdiginiz_resim.png') -120px 0;}

Ayrıca şuradaki linkte sizin çalışmanıza benzer bir örnek anlatılmış.

Yani bu şekilde yine aynı olduğu gibi çoğalıp gidecektir.

dostum bu kodları bizim temaya atınca işlemedi yahu Sayfadaki sağ en altta footerda hakkımızda kısmında yer alacak ama görünmüyor. background çıkıyor ama o çıkmıyor.

Arkadaşın verdiği kod üzerinde biraz düzenleme yaptım bu şekilde denerseniz çalışacaktır muhtemelen.

Css Kodu :

.cerceve {
   width:300px;
    height:60px;
    background-color:black;
}
.cerceve li {
   display: block;
   width: 60px;
   height: 60px;
    list-style:none;
   float:left;
}

.cerceve .facebook{
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0; float:left;
}
.cerceve .facebook:hover{
 background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}
.cerceve .twitter{
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0; float:left;
}
.cerceve .twitter:hover{
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}
.cerceve .plus{
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;float:left;
}
.cerceve .plus:hover{
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}
.cerceve .youtube{
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;float:left;
}
.cerceve .youtube:hover{
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}
.cerceve .rss{
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;-content/themes/pitch/images/r1.png") no-repeat 0 0;float:left;
}
.cerceve .rss:hover{
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0; 
}

HTML KODU:

<div class="cerceve">
<li class="facebook"><a href="#" title="Facebook"></a></li>
<li class="twitter"><a href="#" title="Twitter"></a></li>
<li class="plus"><a href="#" title="Google+"></a></li>
<li class="youtube"><a href="#" title="Youtube"></a></li>
<li class="rss"><a href="#" title="RSS"></a></li>
</div>